dark mode include whole theme

build.sh

@@ -5,7 +5,17 @@ cd themes/FlexTheme
 lessc less/build.less css/theme_base.css --clean-css="--s1 --advanced"
 cd ../../
 
-# 2) Update message files
+# 2) Recompile dark CSS
+cd themes/FlexTheme
+lessc less/dark_build.less css/dark_theme_base.css
+css-color-extractor css/dark_theme.css css/dark_theme.css --format=css
+# Re-add CSS variables and compress CSS
+cp css/dark_theme.css css/dark_temporary.less
+lessc less/dark_build2.less css/dark_theme.css --clean-css="--s1 --advanced"
+rm css/dark_temporary.less
+cd ../../
+
+# 3) Update message files
 cd ../../
 php yii message/extract-module flex-theme
 cd modules/flex-theme

commands/DevController.php

@@ -20,8 +20,8 @@ class DevController extends Controller
     const SELECT2_SRC = '@webroot/static/css/select2Theme';
     const SELECT2_DST = '@flex-theme/themes/FlexTheme/less/css/select2Theme';
 
-    const DARK_FILE_SRC = '@dark-mode/resources/DarkHumHub/less/theme.less';
-    const DARK_FILE_DST = '@flex-theme/themes/FlexTheme/less/dark/theme.less';
+    const DARK_SRC = '@dark-mode/resources/DarkHumHub/less';
+    const DARK_DST = '@flex-theme/themes/FlexTheme/less/dark';
 
     // Special colors
     public $special_colors = [];
@@ -56,11 +56,11 @@ public function actionRebuild()
         // Dark Mode 
         // @todo variables.less of the module has a few more CSS rules that should be imported, too
         if ($this->confirm('Also update Dark Mode file? Dark Mode Module needs to be installed!')) {
-            $src = Yii::getAlias(self::DARK_FILE_SRC);
-            $dst = Yii::getAlias(self::DARK_FILE_DST);
-            copy($src, $dst);
+            $src = Yii::getAlias(self::DARK_SRC);
+            $dst = Yii::getAlias(self::DARK_DST);
+            FileHelper::copyDirectory($src, $dst);
             self::message("Copied $src to $dst", 'success');
-            self::checkAndCorrectFile($dst);
+            self::checkAndCorrectFile($dst . '/theme.less');
         }  
 
 

themes/FlexTheme/less/dark/variables.less

@@ -0,0 +1,97 @@
+/**
+ * Define or overwrite your theme variables here.
+ *
+ * Check for @humhub/static/less/variables.less file for all available variables.
+ * 
+ * You can also access your variables within your view files by calling Yii::$app->view->theme->variable('myVariable');
+ *
+ * You can disable the import of humhub theme components by using variables of the format @prev-{component} e.g.:
+ * This will prevent comment.less component from beeing imported.
+ * e.g.:
+ * @prev-comment: true;
+ *
+ **/
+
+// Workaround because css-color-extractor would remove it
+// JPlayer Audio
+.jp-audio {
+    filter: invert(1) hue-rotate(180deg);
+}
+// UI Icons (e.g. date picker arrows)
+.ui-icon, .ui-widget-content .ui-icon, .ui-widget-header .ui-icon,  {
+    filter: invert(100%);
+}
+
+//
+// Colors for buttons status etc.
+// --------------------------------------------------
+@default: #0d0d0d;
+//
+// Text colors
+// --------------------------------------------------
+
+// Default body text color.
+@text-color-main: #ddd;
+
+// used for some icons and buttons etc. - former @font2
+@text-color-secondary: #bbb;
+
+// highlighted text like some active links hovered links etc. - former @font3
+@text-color-highlight: #fff;
+
+// side information like dates, placeholder, some dropdown headers - former @font4
+@text-color-soft: #dddddd;
+
+// also side information wall entry links (like/comment), help blocks in forms etc.  - former @font5
+@text-color-soft2: #ccc;
+
+// used in gridview summary and installer - former @font1
+@text-color-soft3: #7b7773;
+
+// used as contrast color for @primary, @info, @success, @warning, @danger backgrounds for buttons etc.
+// Note that @default does not use a contrast color @default is normally combined with @text-color-secondary
+@text-color-contrast: #000;
+
+
+//
+// Background colors
+// --------------------------------------------------
+
+// main content background color should be in contrast with @text-color-main, @text-color-secondary and other text colors
+@background-color-main: #222;
+
+// used beside others for tabs - former @background1
+@background-color-secondary: #333;
+
+// page background which is also used for other ui components as comment box etc. - former @background2
+@background-color-page: #000;
+
+// Informative highlighting color
+// (e.g. Comment Permalink, Shared Item, Calendar CurDay, Wiki Active Page Nav, Mail Module Speech Bubble)
+@background-color-highlight: #2e393a;
+
+// Informative highlighting soft color
+// (e.g. Wiki Active Category)
+@background-color-highlight-soft: darken(@background-color-highlight, 10);
+
+// Additional background colors
+@background3: #393939;
+@background4: #5e5e5e;
+
+//
+// Bootstrap Alert boxes
+// --------------------------------------------------
+// Alert box success (used in forms)
+@background-color-success: #3e423b;
+@text-color-success: #84be5e;
+@border-color-success: #97d271;
+
+// Alert box warning (used in forms)
+@background-color-warning: #4d443b;
+@text-color-warning: #e9b168;
+@border-color-warning: #fdd198;
+
+// Alert box danger (used in forms)
+@background-color-danger: #372a2a;
+@text-color-danger: #ff8989;
+@border-color-danger: #ff8989;

themes/FlexTheme/less/dark_build.less

@@ -1,8 +1,4 @@
-// @DARKHUMHUB:  "../../../../../dark-mode/resources/DarkHumHub/less";
-
-// Import dark LESS
-// @import "@{DARKHUMHUB}/theme.less";
-// @import "@{DARKHUMHUB}/variables.less";
+@import "build.less";
 
 @import "dark/theme.less";
 

themes/FlexTheme/less/dark_build2.less

@@ -0,0 +1,5 @@
+// Import CSS variable declarations again after css-color-extractor has removed them
+@import '../css/dark_temporary.less';
+@import 'humhub/variables.less';
+@import 'dark/variables.less';
+@import 'variables.less';