improve dark mode

gulpfile.js

@@ -17,7 +17,6 @@ const postcss = require('gulp-postcss')
 const rename = require('gulp-rename')
 const sass = require('gulp-sass')
 const gulpStylelint = require('gulp-stylelint')
-const wait = require('gulp-wait')
 const rtlcss = require('rtlcss')
 
 sass.compiler = require('sass')
@@ -89,7 +88,6 @@ const scss = () => {
     since: lastRun(scss),
     sourcemaps: true
   })
-    .pipe(wait(500))
     .pipe(dependents())
     .pipe(sass(sassOptions).on('error', sass.logError))
     .pipe(postcss(postcssOptions))
@@ -174,7 +172,7 @@ const serve = () => {
     server: paths.temp.base
   })
 
-  watch([paths.src.scss], series(lintScss, scss))
+  watch([paths.src.scss], { delay: 500 }, series(lintScss, scss))
   watch([paths.src.ts], series(lintTs, ts))
   watch([paths.src.html, paths.src.base + '*.html', paths.src.partials], series(html, index))
   watch([paths.src.assets], series(assets))
@@ -227,7 +225,6 @@ const copyDistCssAll = () => {
     base: paths.src.scss,
     sourcemaps: true
   })
-    .pipe(wait(500))
     .pipe(sass(sassOptions).on('error', sass.logError))
     .pipe(postcss(postcssOptions))
     .pipe(dest(paths.dist.css, { sourcemaps: '.' }))
@@ -235,7 +232,6 @@ const copyDistCssAll = () => {
 
 const copyDistCssRtl = () => {
   return src(paths.dist.css + '/*.css', { sourcemaps: true })
-    .pipe(wait(500))
     .pipe(postcss(postcssRtlOptions))
     .pipe(rename({ suffix: '.rtl' }))
     .pipe(dest(paths.dist.css + '/rtl', { sourcemaps: '.' }))

src/partials/_head.html

@@ -1,16 +1,21 @@
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<!-- If add @@path/css/dark/adminlte-dark.css then the page supports both dark and light color schemes, and the page author prefers / default is light. -->
+<!-- By adding @@path/css/dark/adminlte-dark-addon.css then the page supports both dark color schemes, and the page author prefers / default is light. -->
 <meta name="color-scheme" content="light dark">
+<!-- By adding @@path/css/dark/adminlte-dark-addon.css then the page supports both dark color schemes, and the page author prefers / default is dark. -->
+<!-- <meta name="color-scheme" content="dark light"> -->
 <title>@@title</title>
 <!-- Google Font: Source Sans Pro -->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
 <!-- Font Awesome -->
 <link rel="stylesheet" href="@@path/vendor/@fortawesome/fontawesome-free/css/all.min.css">
 <!-- Theme style -->
-<!-- For dark mode use @@path/css/dark/adminlte-dark.css, remove dist/css/adminlte.css -->
-<!-- <link rel="stylesheet" href="@@path/css/dark/adminlte-dark.css"> -->
-<!-- For RTL verison use @@path/css/rtl/adminlte.rtl.css, remove dist/css/adminlte.css -->
-<!-- <link rel="stylesheet" href="@@path/css/rtl/adminlte.rtl.css"> -->
 <link rel="stylesheet" href="@@path/css/adminlte.css">
+
+<!-- For RTL verison use @@path/css/rtl/adminlte.rtl.css, remove dist/css/adminlte.css -->
+<!-- <link rel="stylesheet" href="@@path/css/rtl/adminlte.rtl.css""> -->
+
+<!-- For dark mode use @@path/css/dark/adminlte-dark-addon.css, do not remove dist/css/adminlte.css or if usinf RTL version do not remove @@path/css/rtl/adminlte.rtl.css-->
+<!-- ... and then the alternate CSS first as a snap-on for dark color scheme preference -->
+<!-- <link rel="stylesheet" href="@@path/css/dark/adminlte-dark-addon.css" media="(prefers-color-scheme: dark)""> -->

src/scss/_main-sidebar.scss

@@ -2,6 +2,42 @@
 // Core: Main Sidebar
 //
 
+.sidebar-bg-dark {
+  @include nav-treeview-dark (
+    $sidebar-dark-bg,
+    $sidebar-dark-hover-bg,
+    $sidebar-dark-color,
+    $sidebar-dark-hover-color,
+    $sidebar-dark-active-color,
+    $sidebar-dark-submenu-bg,
+    $sidebar-dark-submenu-color,
+    $sidebar-dark-submenu-hover-color,
+    $sidebar-dark-submenu-hover-bg,
+    $sidebar-dark-submenu-active-color,
+    $sidebar-dark-submenu-active-bg
+  );
+}
+
+.sidebar-bg-light {
+  @include nav-treeview-light (
+    $sidebar-light-bg,
+    $sidebar-light-hover-bg,
+    $sidebar-light-color,
+    $sidebar-light-hover-color,
+    $sidebar-light-active-color,
+    $sidebar-light-submenu-bg,
+    $sidebar-light-submenu-color,
+    $sidebar-light-submenu-hover-color,
+    $sidebar-light-submenu-hover-bg,
+    $sidebar-light-submenu-active-color,
+    $sidebar-light-submenu-active-bg
+  );
+}
+
+.sidebar-color-primary {
+  @include sidebar-color($primary);
+}
+
 .main-sidebar {
   grid-area: main-sidebar;
   @include transition($sidebar-transition);

src/scss/_nav-sidebar.scss

@@ -1,39 +1,3 @@
-.sidebar-bg-dark {
-  @include nav-treeview-dark (
-    $sidebar-dark-bg,
-    $sidebar-dark-hover-bg,
-    $sidebar-dark-color,
-    $sidebar-dark-hover-color,
-    $sidebar-dark-active-color,
-    $sidebar-dark-submenu-bg,
-    $sidebar-dark-submenu-color,
-    $sidebar-dark-submenu-hover-color,
-    $sidebar-dark-submenu-hover-bg,
-    $sidebar-dark-submenu-active-color,
-    $sidebar-dark-submenu-active-bg
-  );
-}
-
-.sidebar-bg-light {
-  @include nav-treeview-light (
-    $sidebar-light-bg,
-    $sidebar-light-hover-bg,
-    $sidebar-light-color,
-    $sidebar-light-hover-color,
-    $sidebar-light-active-color,
-    $sidebar-light-submenu-bg,
-    $sidebar-light-submenu-color,
-    $sidebar-light-submenu-hover-color,
-    $sidebar-light-submenu-hover-bg,
-    $sidebar-light-submenu-active-color,
-    $sidebar-light-submenu-active-bg
-  );
-}
-
-.sidebar-color-primary {
-  @include sidebar-color($primary);
-}
-
 // Sidebar navigation menu
 .nav-sidebar {
   // All levels

src/scss/_variables.scss

@@ -15,7 +15,7 @@ $gray-400: #ced4da !default;
 $gray-500: #adb5bd !default;
 $gray-600: #6c757d !default;
 $gray-700: #495057 !default;
-$gray-800: #343a40 !default;
+$gray-800: #30363d !default;
 $gray-900: #212529 !default;
 $black:    #000 !default;
 

src/scss/bootstrap-dark/_variables-alt.scss

@@ -13,17 +13,17 @@ $color-schemes: (
 // items marked //** from https://bootswatch.com/darkly/
 // items marked //~~ from https://uxdesign.cc/dark-mode-ui-design-the-definitive-guide-part-1-color-53dcfaea5129
 
-$white-alt:    #fff !default;
+$white-alt:    #f0f6fc !default;
 $gray-100-alt: #f8f9fa !default;
 $gray-200-alt: #e9ecef !default;
 $gray-300-alt: #dee2e6 !default;
 $gray-400-alt: #ced4da !default;
-$gray-500-alt: #adb5bd !default;
+$gray-500-alt: #6c757d !default;
-$gray-600-alt: #6c757d !default;
+$gray-600-alt: #30363d !default;
-$gray-700-alt: #495057 !default;
+$gray-700-alt: #21262d !default;
-$gray-800-alt: #343a40 !default;
+$gray-800-alt: #161b22 !default;
-$gray-900-alt: #212529 !default;
+$gray-900-alt: #0d1117 !default;
-$black-alt:    #000 !default;
+$black-alt:    #010409 !default;
 
 // fusv-disable
 $grays-alt: (
@@ -63,8 +63,8 @@ $colors-alt: (
   "cyan":       $cyan-alt,
   "white":      $white-alt,
   "black":      $black-alt,
-  "gray":       #7e7e7e,  // $gray-600,
+  "gray":       $gray-600-alt,
-  "gray-dark":  #121212  //$gray-800
+  "gray-dark":  $gray-800-alt
 ) !default;
 
 $primary-alt:       $blue-alt !default;
@@ -73,8 +73,8 @@ $success-alt:       $green-alt !default;
 $info-alt:          $cyan-alt !default;
 $warning-alt:       $yellow-alt !default;
 $danger-alt:        $red-alt !default;
-$light-alt:         $gray-400-alt !default;
+$light-alt:         $gray-100-alt !default;
-$dark-alt:          $gray-800-alt !default;
+$dark-alt:          $gray-900-alt !default;
 
 $theme-colors-alt: (
   "primary":    $primary-alt,

src/scss/dark/_cards.scss

@@ -0,0 +1,61 @@
+// Color variants
+@each $name, $color in $theme-colors-alt {
+  @include cards-variant($name, $color);
+}
+
+@each $name, $color in $colors-alt {
+  @include cards-variant($name, $color);
+}
+
+.card {
+  background-color: $dark-alt;
+  color: $white-alt;
+
+  .card {
+    background-color: tint-colors($dark-alt, 5%);
+    color: $white-alt;
+  }
+  .nav.flex-column > li {
+    border-bottom-color: $gray-600-alt;
+  }
+  .card-footer {
+    background-color: rgba($black-alt, .1);
+  }
+  &.card-outline-tabs .card-header a:hover {
+    border-color: $gray-600-alt;
+    border-bottom-color: transparent;
+  }
+  &:not(.card-outline) > .card-header a.active {
+    color: $white-alt;
+  }
+}
+
+.card-comments {
+  background-color: tint-colors($dark-alt, 1.25%);
+  .username {
+    color: $gray-400-alt;
+  }
+  .card-comment {
+    border-bottom-color: tint-colors($dark-alt, 7.5%);
+  }
+}
+
+.todo-list > li {
+  background-color: tint-colors($dark-alt, 5%);
+  border-color: tint-colors($dark-alt, 7.5%);
+  color: $white-alt;
+}
+
+.todo-list {
+  @each $name, $color in $theme-colors-alt {
+    .#{$name} {
+      border-left-color: $color;
+    }
+  }
+
+  @each $name, $color in $colors-alt {
+    .#{$name} {
+      border-left-color: $color;
+    }
+  }
+}

src/scss/dark/_custom-variables-alt.scss

@@ -1,7 +1,36 @@
+// SIDEBAR SKINS
+// --------------------------------------------------------
+
+// Dark sidebar
+$sidebar-dark-bg-alt:                     $dark-alt !default;
+$sidebar-dark-hover-bg-alt:             rgba(255, 255, 255, .1) !default;
+$sidebar-dark-color-alt:                #c2c7d0 !default;
+$sidebar-dark-hover-color-alt:            $white-alt !default;
+$sidebar-dark-active-color-alt:           $white-alt !default;
+$sidebar-dark-submenu-bg-alt:             transparent !default;
+$sidebar-dark-submenu-color-alt:        #c2c7d0 !default;
+$sidebar-dark-submenu-hover-color-alt:    $white-alt !default;
+$sidebar-dark-submenu-hover-bg-alt:       $sidebar-dark-hover-bg-alt !default;
+$sidebar-dark-submenu-active-color-alt:   $sidebar-dark-bg-alt !default;
+$sidebar-dark-submenu-active-bg-alt:    rgba(255, 255, 255, .9) !default;
+
+// Light sidebar
+$sidebar-light-bg-alt:                     $white-alt !default;
+$sidebar-light-hover-bg-alt:               rgba($black-alt, .1) !default;
+$sidebar-light-color-alt:                  $gray-800-alt !default;
+$sidebar-light-hover-color-alt:            $gray-900-alt !default;
+$sidebar-light-active-color-alt:           $black-alt !default;
+$sidebar-light-submenu-bg-alt:             transparent !default;
+$sidebar-light-submenu-color-alt:        #777 !default;
+$sidebar-light-submenu-hover-color-alt:    $black-alt !default;
+$sidebar-light-submenu-hover-bg-alt:       $sidebar-light-hover-bg-alt !default;
+$sidebar-light-submenu-active-color-alt:   $sidebar-light-hover-color-alt !default;
+$sidebar-light-submenu-active-bg-alt:      $sidebar-light-submenu-hover-bg-alt !default;
+
 // MAIN FOOTER
 // --------------------------------------------------------
 $main-footer-bg-alt:          $dark-alt !default;
 
 // Body background (Affects main content background only)
-$main-bg-alt:                 tint-color($dark-alt, 7.5%) !default;
+$main-bg-alt:                 $black-alt !default;
 $main-color-alt:              $white-alt !default;

src/scss/dark/_info-box.scss

@@ -0,0 +1,15 @@
+.info-box {
+  background-color: $dark-alt;
+  color: $white-alt;
+  @each $name, $color in $theme-colors-alt {
+    .info-box {
+      .bg-#{$name} {
+        color: color-contrast($color);
+
+        .progress-bar {
+          background-color: color-contrast($color);
+        }
+      }
+    }
+  }
+}

src/scss/dark/_main-sidebar.scss

@@ -0,0 +1,39 @@
+//
+// Core: Main Sidebar
+//
+
+.sidebar-bg-dark {
+  @include nav-treeview-dark (
+    $sidebar-dark-bg-alt,
+    $sidebar-dark-hover-bg-alt,
+    $sidebar-dark-color-alt,
+    $sidebar-dark-hover-color-alt,
+    $sidebar-dark-active-color-alt,
+    $sidebar-dark-submenu-bg-alt,
+    $sidebar-dark-submenu-color-alt,
+    $sidebar-dark-submenu-hover-color-alt,
+    $sidebar-dark-submenu-hover-bg-alt,
+    $sidebar-dark-submenu-active-color-alt,
+    $sidebar-dark-submenu-active-bg-alt
+  );
+}
+
+.sidebar-bg-light {
+  @include nav-treeview-light (
+    $sidebar-light-bg-alt,
+    $sidebar-light-hover-bg-alt,
+    $sidebar-light-color-alt,
+    $sidebar-light-hover-color-alt,
+    $sidebar-light-active-color-alt,
+    $sidebar-light-submenu-bg-alt,
+    $sidebar-light-submenu-color-alt,
+    $sidebar-light-submenu-hover-color-alt,
+    $sidebar-light-submenu-hover-bg-alt,
+    $sidebar-light-submenu-active-color-alt,
+    $sidebar-light-submenu-active-bg-alt
+  );
+}
+
+.sidebar-color-primary {
+  @include sidebar-color($primary-alt);
+}

src/scss/dark/_table.scss

@@ -0,0 +1,28 @@
+.table-bordered {
+  &,
+  td,
+  th {
+    border-color: $gray-600-alt;
+  }
+}
+.table-hover {
+  tbody tr:hover {
+    color: $gray-300-alt;
+    background-color: tint-color($dark-alt, 2.5%);
+    border-color: $gray-600-alt;
+  }
+}
+.table {
+  thead th {
+    border-bottom-color: $gray-600-alt;
+  }
+  th,
+  td {
+    border-top-color: $gray-600-alt;
+  }
+  &.table-head-fixed {
+    thead tr:nth-child(1) th {
+      background-color: tint-color($dark-alt, 5%);
+    }
+  }
+}

src/scss/dark/adminlte-dark-addon.scss

@@ -55,3 +55,10 @@
 
 // Unique to dark-mode
 @import "../bootstrap-dark/dark";
+
+// AdminLTE dark
+@import "../mixins";
+@import "custom-variables-alt";
+@import "parts/core";
+@import "parts/components";
+@import "parts/extra-components";

src/scss/dark/parts/_components.scss

@@ -0,0 +1,6 @@
+//
+// Part: Components
+//
+
+@import "../cards";
+@import "../table";

src/scss/dark/parts/_core.scss

@@ -1,3 +1,4 @@
 @import "../main-header";
+@import "../main-sidebar";
 @import "../content-wrapper";
 @import "../main-footer";

src/scss/dark/parts/_extra-components.scss

@@ -0,0 +1,5 @@
+//
+// Part: Extra Components
+//
+
+@import "../info-box";

src/scss/dark/parts/_miscellaneous.scss

@@ -0,0 +1,7 @@
+//
+// Part: Miscellaneous
+//
+
+@import "../miscellaneous";
+@import "../text";
+@import "../colors";