Merge pull request #7 from felixhahnweilheim/add-dark-themes

Draft: add dark themes

build-less-to-css.sh

@@ -1,9 +1,46 @@
 #!/bin/bash
 
+# Compile CSS
+
 cd themes/clean-base/less
 lessc ./build.less ../css/theme.css --clean-css="--s1 --advanced" --source-map=../css/theme.css.map
 cd ../../clean-contrasted/less
 lessc ./build.less ../css/theme.css --clean-css="--s1 --advanced" --source-map=../css/theme.css.map
 cd ../../clean-bordered/less
 lessc ./build.less ../css/theme.css --clean-css="--s1 --advanced" --source-map=../css/theme.css.map
-cd ../../..
+cd ../../..
+
+# Compile dark CSS for the Dark mode module: https://github.com/felixhahnweilheim/humhub-dark-mode
+
+# 1) clean-base (dark)
+cd themes/clean-base
+lessc less/dark/build.less css/dark.css
+# Note: Unfortunately the color extractor removes the CSS variables
+css-color-extractor css/dark.css css/dark.css --format=css
+# Re-add CSS variables and compress CSS
+cp css/dark.css css/temporary.less
+lessc less/dark/build2.less css/dark.css --clean-css="--s1 --advanced" --source-map=css/dark.css.map
+rm css/temporary.less
+cd ../../
+
+# 2) clean-bordered (dark)
+cd themes/clean-bordered
+lessc less/dark/build.less css/dark.css
+# Note: Unfortunately the color extractor removes the CSS variables
+css-color-extractor css/dark.css css/dark.css --format=css
+# Re-add CSS variables and compress CSS
+cp css/dark.css css/temporary.less
+lessc less/dark/build2.less css/dark.css --clean-css="--s1 --advanced" --source-map=css/dark.css.map
+rm css/temporary.less
+cd ../../
+
+# 3) clean-contrasted (dark)
+cd themes/clean-contrasted
+lessc less/dark/build.less css/dark.css
+# Note: Unfortunately the color extractor removes the CSS variables
+css-color-extractor css/dark.css css/dark.css --format=css
+# Re-add CSS variables and compress CSS
+cp css/dark.css css/temporary.less
+lessc less/dark/build2.less css/dark.css --clean-css="--s1 --advanced" --source-map=css/dark.css.map
+rm css/temporary.less
+cd ../../

docs/CHANGELOG.md

@@ -4,6 +4,7 @@ Changelog
 Unreleased (compile CSS for Humhub 1.15.0-beta.2 before new release)
 --------------------
 - Fix #6: Mobile: top bar issues with added items in the notifications block such as the night mode button
+- Enh #7: Dark CSS for the [Dark mode](https://marketplace.humhub.com/module/dark-mode/description) module (thanks @felixhahnweilheim)
 
 1.5.0 (August 1, 2023)
 --------------------

docs/DEVELOPER.md

@@ -0,0 +1,8 @@
+# Developer
+
+### Build CSS
+
+CSS must be rebuilt for each new Humhub major version:
+1. Install [less](https://lesscss.org/usage/#command-line-usage-installing) and [css-color-extractor](https://github.com/rsanchez/css-color-extractor#cli).
+2. Install [Dark mode module](https://marketplace.humhub.com/module/dark-mode/description) in the same "Module" directory.
+3. Compile CSS using `build-less-to-css.sh` script.

themes/clean-base/less/dark/build.less

@@ -0,0 +1,13 @@
+// Dark version of clean-base theme
+
+// Import clean-base
+@import "../build.less";
+
+// Import DarkMode
+@DARKMODE: "../../../../../dark-mode/resources/DarkHumHub/less";
+@import "@{DARKMODE}/variables.less";
+@import "@{DARKMODE}/theme.less";
+
+// Import LESS specific for clean base dark
+@import "variables.less";
+@import "clean-dark.less";

themes/clean-base/less/dark/build2.less

@@ -0,0 +1,5 @@
+// Import CSS variable declarations again after css-color-extractor has removed them
+@import '../../css/temporary.less';
+@import '../../../../../../../static/less/variables.less';
+@import '../../../../../dark-mode/resources/DarkHumHub/less/variables.less';
+@import 'variables.less';

themes/clean-base/less/dark/clean-dark.less

@@ -0,0 +1,31 @@
+// Top Bar
+#topbar > .container > .nav > li > a,
+#topbar > .container .notifications .btn-group > a {
+  color: @text-color-heading;
+}
+
+#topbar > .container .btn-group > a:hover {
+  background-color: @text-color-heading;
+  color: @text-color-contrast;
+}
+
+a.list-group-item:hover, a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus,
+#topbar > .container > .nav > li.active > a {
+  color: @text-color-highlight;
+}
+
+// Notifications and Mail dropdown (unread messages)
+.messagePreviewEntry.unread,
+.media-list li.new {
+  background-color: @background-color-highlight !important;
+}
+
+// Profile Title and Subtitle
+.panel-profile .panel-profile-header .img-profile-data, .panel-profile .panel-profile-header .img-profile-data h1, .panel-profile .panel-profile-header .img-profile-data h2 {
+  color: @text-color-highlight;
+}
+
+// Tab Active
+.tab-menu .nav-tabs li.active > a, .tab-menu .nav-tabs li.active > a:focus, .tab-menu .nav-tabs li.active > a:hover, ul.tab-menu-settings li.active > a, ul.tab-menu-settings li.active > a:focus, ul.tab-menu-settings li.active > a:hover {
+  color: @text-color-highlight;
+}

themes/clean-base/less/dark/variables.less

@@ -0,0 +1 @@
+@text-color-heading: lighten(@primary, 40);