improve dark mode with variables

gulpfile.js

@@ -9,7 +9,6 @@ const del = require('del')
 const esbuild = require('esbuild')
 const { src, dest, lastRun, watch, series } = require('gulp')
 const cleanCss = require('gulp-clean-css')
-const dependents = require('gulp-dependents')
 const eslint = require('gulp-eslint7')
 const fileinclude = require('gulp-file-include')
 const npmDist = require('gulp-npm-dist')
@@ -91,19 +90,12 @@ const scss = () => {
     .pipe(browserSync.stream())
 }
 
-/**
- * Use superScss to build css along with Dark mode
- */
-
-const superScss = () => {
-  return src(paths.src.scss + '/**/*.scss', {
-    since: lastRun(scss),
-    sourcemaps: true
-  })
-    .pipe(dependents())
+// Compile SCSS Dark
+const scssDark = () => {
+  return src(paths.src.scss + '/dark/adminlte-dark-addon.scss', { sourcemaps: true })
     .pipe(sass(sassOptions).on('error', sass.logError))
     .pipe(postcss(postcssOptions))
-    .pipe(dest(paths.temp.css, { sourcemaps: '.' }))
+    .pipe(dest(paths.temp.css + '/dark', { sourcemaps: '.' }))
     .pipe(browserSync.stream())
 }
 
@@ -183,23 +175,13 @@ const serve = () => {
     server: paths.temp.base
   })
 
-  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))
-  watch([paths.src.vendor], series(vendor))
-}
-
-const superServe = () => {
-  browserSync.init({
-    server: paths.temp.base
-  })
-
-  watch([paths.src.scss], { delay: 500 }, series(lintScss, superScss))
+  watch([paths.src.scss], series(lintScss))
+  watch([paths.src.scss + '/**/*.scss', '!' + paths.src.scss + '/bootstrap-dark/**/*.scss', '!' + paths.src.scss + '/dark/**/*.scss'], series(scss))
+  watch([paths.src.scss + '/bootstrap-dark/', paths.src.scss + '/dark/'], series(scssDark))
   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))
-  watch([paths.src.vendor], series(vendor))
+  // watch([paths.src.vendor], series(vendor)) // Probably not required
 }
 
 // From here Dist will Start
@@ -311,7 +293,4 @@ const copyDistVendor = () => {
 exports.build = series(lintScss, lintTs, cleanDist, copyDistCssAll, copyDistCssRtl, minifyDistCss, copyDistJs, minifyDistJs, copyDistHtml, copyDistHtmlIndex, copyDistAssets, copyDistVendor)
 
 // Default - Only for light mode AdminLTE
-exports.default = series(scss, ts, html, index, assets, vendor, serve)
-
-// Super Dev mode for Dark anf Light mode
-exports.super = series(superScss, ts, html, index, assets, vendor, superServe)
+exports.default = series(scss, scssDark, ts, html, index, assets, vendor, serve)

package-lock.json

@@ -1830,27 +1830,6 @@
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
       "dev": true
     },
-    "contains-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-1.0.0.tgz",
-      "integrity": "sha1-NFizMhhWA+ju0Y9RjUoQiIo6vJE=",
-      "dev": true,
-      "requires": {
-        "normalize-path": "^2.1.1",
-        "path-starts-with": "^1.0.0"
-      },
-      "dependencies": {
-        "normalize-path": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-          "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
-          "dev": true,
-          "requires": {
-            "remove-trailing-separator": "^1.0.1"
-          }
-        }
-      }
-    },
     "convert-source-map": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
@@ -2496,9 +2475,9 @@
       }
     },
     "esbuild": {
-      "version": "0.11.23",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.11.23.tgz",
-      "integrity": "sha512-iaiZZ9vUF5wJV8ob1tl+5aJTrwDczlvGP0JoMmnpC2B0ppiMCu8n8gmy5ZTGl5bcG081XBVn+U+jP+mPFm5T5Q==",
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.1.tgz",
+      "integrity": "sha512-WfQ00MKm/Y4ysz1u9PCUAsV66k5lbrcEvS6aG9jhBIavpB94FBdaWeBkaZXxCZB4w+oqh+j4ozJFWnnFprOXbg==",
       "dev": true
     },
     "escalade": {
@@ -2520,9 +2499,9 @@
       "dev": true
     },
     "eslint": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.26.0.tgz",
-      "integrity": "sha512-4R1ieRf52/izcZE7AlLy56uIHHDLT74Yzz2Iv2l6kDaYvEu9x+wMB5dZArVL8SYGXSYV2YAg70FcW5Y5nGGNIg==",
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.27.0.tgz",
+      "integrity": "sha512-JZuR6La2ZF0UD384lcbnd0Cgg6QJjiCwhMD6eU4h/VGPcVGwawNNzKU41tgokGXnfjOOyI6QIffthhJTPzzuRA==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "7.12.11",
@@ -2533,12 +2512,14 @@
         "debug": "^4.0.1",
         "doctrine": "^3.0.0",
         "enquirer": "^2.3.5",
+        "escape-string-regexp": "^4.0.0",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^2.1.0",
         "eslint-visitor-keys": "^2.0.0",
         "espree": "^7.3.1",
         "esquery": "^1.4.0",
         "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
         "file-entry-cache": "^6.0.1",
         "functional-red-black-tree": "^1.0.1",
         "glob-parent": "^5.0.0",
@@ -2550,7 +2531,7 @@
         "js-yaml": "^3.13.1",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
-        "lodash": "^4.17.21",
+        "lodash.merge": "^4.6.2",
         "minimatch": "^3.0.4",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.1",
@@ -2559,7 +2540,7 @@
         "semver": "^7.2.1",
         "strip-ansi": "^6.0.0",
         "strip-json-comments": "^3.1.0",
-        "table": "^6.0.4",
+        "table": "^6.0.9",
         "text-table": "^0.2.0",
         "v8-compile-cache": "^2.0.3"
       },
@@ -2598,6 +2579,12 @@
             "supports-color": "^7.1.0"
           }
         },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
+        },
         "ignore": {
           "version": "4.0.6",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
@@ -2688,14 +2675,13 @@
       }
     },
     "eslint-plugin-import": {
-      "version": "2.23.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.23.2.tgz",
-      "integrity": "sha512-LmNoRptHBxOP+nb0PIKz1y6OSzCJlB+0g0IGS3XV4KaKk2q4szqQ6s6F1utVf5ZRkxk/QOTjdxe7v4VjS99Bsg==",
+      "version": "2.23.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.23.3.tgz",
+      "integrity": "sha512-wDxdYbSB55F7T5CC7ucDjY641VvKmlRwT0Vxh7PkY1mI4rclVRFWYfsrjDgZvwYYDZ5ee0ZtfFKXowWjqvEoRQ==",
       "dev": true,
       "requires": {
         "array-includes": "^3.1.3",
         "array.prototype.flat": "^1.2.4",
-        "contains-path": "^1.0.0",
         "debug": "^2.6.9",
         "doctrine": "^2.1.0",
         "eslint-import-resolver-node": "^0.3.4",
@@ -4437,29 +4423,6 @@
         }
       }
     },
-    "gulp-dependents": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/gulp-dependents/-/gulp-dependents-1.2.5.tgz",
-      "integrity": "sha512-zwZzr4yxEVKlW96Ch9DS6KsmA9XrHYWYFTdJ3q7GaG6uiVNAsZUR57BlLBRCV0YkVL0sfMozJcQOGdxyOxcjQA==",
-      "dev": true,
-      "requires": {
-        "fancy-log": "^1.3.3",
-        "through2": "^3.0.1",
-        "vinyl": "^2.2.0"
-      },
-      "dependencies": {
-        "through2": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz",
-          "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.4",
-            "readable-stream": "2 || 3"
-          }
-        }
-      }
-    },
     "gulp-eslint7": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/gulp-eslint7/-/gulp-eslint7-0.3.1.tgz",
@@ -4769,15 +4732,6 @@
         }
       }
     },
-    "gulp-wait": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/gulp-wait/-/gulp-wait-0.0.2.tgz",
-      "integrity": "sha1-7Ov/REbhoNU3yx3Hc9vUWB0X+y0=",
-      "dev": true,
-      "requires": {
-        "map-stream": "0.0.4"
-      }
-    },
     "gulplog": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz",
@@ -5945,12 +5899,6 @@
       "integrity": "sha512-+WA2/1sPmDj1dlvvJmB5G6JKfY9dpn7EVBUL06+y6PoljPkh+6V1QihwxNkbcGxCRjt2b0F9K0taiCuo7MbdFQ==",
       "dev": true
     },
-    "map-stream": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.4.tgz",
-      "integrity": "sha1-XsbekCE+9sey65Nn6a3o2k79tos=",
-      "dev": true
-    },
     "map-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
@@ -7357,26 +7305,6 @@
       "integrity": "sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=",
       "dev": true
     },
-    "path-starts-with": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/path-starts-with/-/path-starts-with-1.0.0.tgz",
-      "integrity": "sha1-soJDAV6LE43lcmgqxS2kLmRq2E4=",
-      "dev": true,
-      "requires": {
-        "normalize-path": "^2.1.1"
-      },
-      "dependencies": {
-        "normalize-path": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-          "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
-          "dev": true,
-          "requires": {
-            "remove-trailing-separator": "^1.0.1"
-          }
-        }
-      }
-    },
     "path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -7588,14 +7516,14 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.2.15",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.15.tgz",
-      "integrity": "sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.0.tgz",
+      "integrity": "sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==",
       "dev": true,
       "requires": {
         "colorette": "^1.2.2",
         "nanoid": "^3.1.23",
-        "source-map": "^0.6.1"
+        "source-map-js": "^0.6.2"
       }
     },
     "postcss-html": {
@@ -9383,6 +9311,12 @@
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true
     },
+    "source-map-js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "dev": true
+    },
     "source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",

package.json

@@ -46,15 +46,14 @@
     "browser-sync": "^2.26.14",
     "bundlewatch": "^0.3.2",
     "del": "^6.0.0",
-    "esbuild": "^0.11.23",
-    "eslint": "^7.26.0",
+    "esbuild": "^0.12.1",
+    "eslint": "^7.27.0",
     "eslint-config-xo": "^0.36.0",
     "eslint-config-xo-typescript": "^0.41.1",
-    "eslint-plugin-import": "^2.23.2",
+    "eslint-plugin-import": "^2.23.3",
     "eslint-plugin-unicorn": "^32.0.1",
     "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
-    "gulp-dependents": "^1.2.5",
     "gulp-eslint7": "^0.3.1",
     "gulp-file-include": "^2.3.0",
     "gulp-npm-dist": "^1.0.3",
@@ -62,10 +61,9 @@
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^4.1.0",
     "gulp-stylelint": "^13.0.0",
-    "gulp-wait": "0.0.2",
     "lockfile-lint": "^4.6.2",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.2.15",
+    "postcss": "^8.3.0",
     "rtlcss": "^3.1.2",
     "sass": "^1.32.13",
     "stylelint": "^13.13.1",

src/scss/_main-sidebar.scss

@@ -14,7 +14,8 @@
     $lte-sidebar-dark-submenu-hover-color,
     $lte-sidebar-dark-submenu-hover-bg,
     $lte-sidebar-dark-submenu-active-color,
-    $lte-sidebar-dark-submenu-active-bg
+    $lte-sidebar-dark-submenu-active-bg,
+    $lte-sidebar-dark-header-color
   );
 }
 
@@ -30,7 +31,8 @@
     $lte-sidebar-light-submenu-hover-color,
     $lte-sidebar-light-submenu-hover-bg,
     $lte-sidebar-light-submenu-active-color,
-    $lte-sidebar-light-submenu-active-bg
+    $lte-sidebar-light-submenu-active-bg,
+    $lte-sidebar-light-header-color
   );
 }
 

src/scss/_variables.scss

@@ -3,50 +3,77 @@
 // Variables should follow the `$component-state-property-size` formula for
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
-// Color system
-
-$gray-800: #343a40 !default;
-$dark:          $gray-800 !default;
-
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
-$enable-shadows:              true !default;
+$enable-shadows:              true;
 
 // Links
 //
 // Style anchor elements.
 
-$link-decoration:                         none !default;
+$link-decoration:                         none;
 
 // Typography
 //
 // Font, line-height, and color for body text, headings, and more.
 
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif:      "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 // stylelint-enable value-keyword-case
 
 // Tables
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
-$table-cell-padding-y:        .75rem !default;
-$table-cell-padding-x:        .75rem !default;
+$table-cell-padding-y:        .75rem;
+$table-cell-padding-x:        .75rem;
 
 // Forms
 
-$form-check-input-width:                  1em !default;
+$form-check-input-width:                  1em;
 
 // Navbar
 
-$navbar-nav-link-padding-x:         1rem !default;
+$navbar-nav-link-padding-x:         1rem;
 
 // End of Bootstrap Variables
 
 // Variables for AdminLTE
 
+// Dynamic Variables
+// --------------------------------------------------------
+:root {
+  // Dark Sidebar Native Variables
+  --lte-sidebar-dark-bg: #343a40;
+  --lte-sidebar-dark-hover-bg: rgba(255, 255, 255, .1);
+  --lte-sidebar-dark-color: #c2c7d0;
+  --lte-sidebar-dark-hover-color: #{$white};
+  --lte-sidebar-dark-active-color: #{$white};
+  --lte-sidebar-dark-submenu-bg: transparent;
+  --lte-sidebar-dark-submenu-color: var(--lte-sidebar-dark-color);
+  --lte-sidebar-dark-submenu-hover-color: #{$white};
+  --lte-sidebar-dark-submenu-hover-bg: var(--lte-sidebar-dark-hover-bg);
+  --lte-sidebar-dark-submenu-active-color: var(--lte-sidebar-dark-bg);
+  --lte-sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9);
+  --lte-sidebar-dark-header-color: #{tint-color(#c2c7d0, 5%)};
+
+  // Light Sidebar Native Variables
+  --lte-sidebar-light-bg: #{$white};
+  --lte-sidebar-light-hover-bg: rgba(#{$black}, .1);
+  --lte-sidebar-light-color: #{$gray-800};
+  --lte-sidebar-light-hover-color: #{$gray-900};
+  --lte-sidebar-light-active-color: #{$black};
+  --lte-sidebar-light-submenu-bg: transparent;
+  --lte-sidebar-light-submenu-color: #777;
+  --lte-sidebar-light-submenu-hover-color: #{$black};
+  --lte-sidebar-light-submenu-hover-bg: var(--lte-sidebar-light-hover-bg);
+  --lte-sidebar-light-submenu-active-color: var(--lte-sidebar-light-hover-color);
+  --lte-sidebar-light-submenu-active-bg: var(--lte-sidebar-light-submenu-hover-bg);
+  --lte-sidebar-light-header-color: #{shade-color($gray-800, 5%)};
+}
+
 // LAYOUT
 // --------------------------------------------------------
 
@@ -85,30 +112,32 @@ $lte-sidebar-transition:          min-width $lte-transition-speed $lte-transitio
 // --------------------------------------------------------
 
 // Dark sidebar
-$lte-sidebar-dark-bg:                     $dark !default;
-$lte-sidebar-dark-hover-bg:             rgba(255, 255, 255, .1) !default;
-$lte-sidebar-dark-color:                #c2c7d0 !default;
-$lte-sidebar-dark-hover-color:            $white !default;
-$lte-sidebar-dark-active-color:           $white !default;
-$lte-sidebar-dark-submenu-bg:             transparent !default;
-$lte-sidebar-dark-submenu-color:        #c2c7d0 !default;
-$lte-sidebar-dark-submenu-hover-color:    $white !default;
-$lte-sidebar-dark-submenu-hover-bg:       $lte-sidebar-dark-hover-bg !default;
-$lte-sidebar-dark-submenu-active-color:   $lte-sidebar-dark-bg !default;
-$lte-sidebar-dark-submenu-active-bg:    rgba(255, 255, 255, .9) !default;
+$lte-sidebar-dark-bg:                   var(--lte-sidebar-dark-bg) !default;
+$lte-sidebar-dark-hover-bg:             var(--lte-sidebar-dark-hover-bg) !default;
+$lte-sidebar-dark-color:                var(--lte-sidebar-dark-color) !default;
+$lte-sidebar-dark-hover-color:          var(--lte-sidebar-dark-hover-color) !default;
+$lte-sidebar-dark-active-color:         var(--lte-sidebar-dark-active-color) !default;
+$lte-sidebar-dark-submenu-bg:           var(--lte-sidebar-dark-submenu-bg) !default;
+$lte-sidebar-dark-submenu-color:        var(--lte-sidebar-dark-submenu-color) !default;
+$lte-sidebar-dark-submenu-hover-color:  var(--lte-sidebar-dark-submenu-hover-color) !default;
+$lte-sidebar-dark-submenu-hover-bg:     var(--lte-sidebar-dark-submenu-hover-bg) !default;
+$lte-sidebar-dark-submenu-active-color: var(--lte-sidebar-dark-submenu-active-color) !default;
+$lte-sidebar-dark-submenu-active-bg:    var(--lte-sidebar-dark-submenu-active-bg) !default;
+$lte-sidebar-dark-header-color:         var(--lte-sidebar-dark-header-color) !default;
 
 // Light sidebar
-$lte-sidebar-light-bg:                     $white !default;
-$lte-sidebar-light-hover-bg:               rgba($black, .1) !default;
-$lte-sidebar-light-color:                  $gray-800 !default;
-$lte-sidebar-light-hover-color:            $gray-900 !default;
-$lte-sidebar-light-active-color:           $black !default;
-$lte-sidebar-light-submenu-bg:             transparent !default;
-$lte-sidebar-light-submenu-color:        #777 !default;
-$lte-sidebar-light-submenu-hover-color:    $black !default;
-$lte-sidebar-light-submenu-hover-bg:       $lte-sidebar-light-hover-bg !default;
-$lte-sidebar-light-submenu-active-color:   $lte-sidebar-light-hover-color !default;
-$lte-sidebar-light-submenu-active-bg:      $lte-sidebar-light-submenu-hover-bg !default;
+$lte-sidebar-light-bg:                   var(--lte-sidebar-light-bg) !default;
+$lte-sidebar-light-hover-bg:             var(--lte-sidebar-light-hover-bg) !default;
+$lte-sidebar-light-color:                var(--lte-sidebar-light-color) !default;
+$lte-sidebar-light-hover-color:          var(--lte-sidebar-light-hover-color) !default;
+$lte-sidebar-light-active-color:         var(--lte-sidebar-light-active-color) !default;
+$lte-sidebar-light-submenu-bg:           var(--lte-sidebar-light-submenu-bg) !default;
+$lte-sidebar-light-submenu-color:        var(--lte-sidebar-light-submenu-color) !default;
+$lte-sidebar-light-submenu-hover-color:  var(--lte-sidebar-light-submenu-hover-color) !default;
+$lte-sidebar-light-submenu-hover-bg:     var(--lte-sidebar-light-submenu-hover-bg) !default;
+$lte-sidebar-light-submenu-active-color: var(--lte-sidebar-light-submenu-active-color) !default;
+$lte-sidebar-light-submenu-active-bg:    var(--lte-sidebar-light-submenu-active-bg) !default;
+$lte-sidebar-light-header-color:         var(--lte-sidebar-light-header-color) !default;
 
 // SIDEBAR MINI
 // --------------------------------------------------------

src/scss/adminlte.scss

@@ -10,9 +10,7 @@
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 @import "variables"; // little modified are here
-@import "bootstrap/scss/mixins";
 @import "custom-utilities";
-@import "bootstrap/scss/utilities";
 @import "bootstrap/scss/bootstrap";
 
 // Variables and Mixins

src/scss/bootstrap-dark/_list-group.scss

@@ -53,11 +53,11 @@
 // List group contextual variants
 
 @each $state, $value in $theme-colors-alt {
-  $list-group-background-alt: shift-color($value, $list-group-item-bg-scale-alt);
-  $list-group-color-alt: shift-color($value, $list-group-item-color-scale-alt);
-  @if (contrast-ratio($list-group-background-alt, $list-group-color-alt) < $min-contrast-ratio-alt) {
-    $list-group-color-alt: mix($value, color-contrast($list-group-background-alt, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt), abs($list-group-item-color-scale-alt));
+  $list-group-variant-bg-alt: shift-color($value, $list-group-item-bg-scale-alt);
+  $list-group-variant-color-alt: shift-color($value, $list-group-item-color-scale-alt);
+  @if (contrast-ratio($list-group-variant-bg-alt, $list-group-variant-color-alt) < $min-contrast-ratio-alt) {
+    $list-group-variant-color-alt: mix($value, color-contrast($list-group-variant-bg-alt, $color-contrast-dark-alt, $color-contrast-light-alt, $min-contrast-ratio-alt), abs($list-group-item-color-scale-alt));
   }
 
-  @include list-group-item-variant($state, $list-group-background-alt, $list-group-color-alt);
+  @include list-group-item-variant($state, $list-group-variant-bg-alt, $list-group-variant-color-alt);
 }

src/scss/bootstrap-dark/_tables.scss

@@ -4,6 +4,7 @@
 
 .table {
   --#{$variable-prefix}table-bg: #{$table-bg-alt};
+  --#{$variable-prefix}table-accent-bg: #{$table-bg-alt};
   --#{$variable-prefix}table-striped-color: #{$table-striped-color-alt};
   --#{$variable-prefix}table-striped-bg: #{$table-striped-bg-alt};
   --#{$variable-prefix}table-active-color: #{$table-active-color-alt};

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

@@ -14,11 +14,11 @@ $color-schemes: (
 // items marked //~~ from https://uxdesign.cc/dark-mode-ui-design-the-definitive-guide-part-1-color-53dcfaea5129
 
 $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: #6c757d !default;
+$gray-100-alt: #c9d1d9 !default;
+$gray-200-alt: #b1bac4 !default;
+$gray-300-alt: #8b949e !default;
+$gray-400-alt: #6e7681 !default;
+$gray-500-alt: #484f58 !default;
 $gray-600-alt: #30363d !default;
 $gray-700-alt: #21262d !default;
 $gray-800-alt: #161b22 !default;
@@ -74,7 +74,7 @@ $info-alt:          $cyan-alt !default;
 $warning-alt:       $yellow-alt !default;
 $danger-alt:        $red-alt !default;
 $light-alt:         $gray-100-alt !default;
-$dark-alt:          $gray-900-alt !default;
+$dark-alt:          $gray-800-alt !default;
 
 $theme-colors-alt: (
   "primary":    $primary-alt,
@@ -114,7 +114,7 @@ $body-color-alt:                $gray-100-alt !default;  // $gray-900 !default;
 // ______________________________________
 // Style anchor elements.
 
-$link-color-alt:                              shift-color($primary-alt, -15%) !default;
+$link-color-alt:                              #58a6ff !default;
 $link-shade-percentage-alt:                   20% !default;  // TODO: should be -20%;
 $link-hover-color-alt:                        tint-color($link-color-alt, $link-shade-percentage-alt) !default;  // TODO: shift-color
 
@@ -235,7 +235,7 @@ $input-bg-alt:                              $gray-800-alt !default;
 $input-disabled-bg-alt:                     $gray-900-alt !default;
 $input-disabled-border-color-alt:           null !default;
 
-$input-color-alt:                           $gray-300-alt !default;
+$input-color-alt:                           $body-color-alt !default;
 $input-border-color-alt:                    $gray-700-alt !default;
 $input-box-shadow-alt:                      $box-shadow-inset-alt !default;
 
@@ -310,7 +310,7 @@ $form-range-thumb-disabled-bg-alt:             $gray-500-alt !default;
 
 $form-file-button-color-alt:          $input-color-alt !default;
 $form-file-button-bg-alt:             $input-group-addon-bg-alt !default;
-$form-file-button-hover-bg-alt:       shade-color($form-file-button-bg-alt, 5%) !default;
+$form-file-button-hover-bg-alt:       tint-color($form-file-button-bg-alt, 5%) !default;
 
 $form-floating-label-opacity-alt:     .65 !default;
 
@@ -593,7 +593,7 @@ $figure-caption-color-alt:              $gray-400-alt !default;
 // Breadcrumbs
 // ______________________________________
 
-$breadcrumb-bg-alt:                     $gray-800-alt !default;  // null !default;
+$breadcrumb-bg-alt:                     null !default;  // null !default;
 $breadcrumb-divider-color-alt:          $gray-400-alt !default;
 $breadcrumb-active-color-alt:           $gray-400-alt !default;
 

src/scss/bootstrap-dark/forms/_form-control.scss

@@ -28,7 +28,7 @@
 
   // Disabled and read-only inputs
   &:disabled,
-  &:read-only {
+  &[readonly] {
     background-color: $input-disabled-bg-alt;
     border-color: $input-disabled-border-color-alt;
   }
@@ -40,7 +40,7 @@
     border-color: inherit;
   }
 
-  &:hover:not(:disabled):not(:read-only)::file-selector-button {
+  &:hover:not(:disabled):not([readonly])::file-selector-button {
     background-color: $form-file-button-hover-bg-alt;
   }
 
@@ -50,7 +50,7 @@
     border-color: inherit;
   }
 
-  &:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button {
+  &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
     background-color: $form-file-button-hover-bg-alt;
   }
 }

src/scss/dark/_cards.scss

@@ -8,11 +8,11 @@
 }
 
 .card {
-  background-color: $dark-alt;
+  background-color: $gray-900-alt;
   color: $white-alt;
 
   .card {
-    background-color: tint-colors($dark-alt, 5%);
+    background-color: tint-colors($gray-900-alt, 5%);
     color: $white-alt;
   }
   .nav.flex-column > li {
@@ -31,18 +31,18 @@
 }
 
 .card-comments {
-  background-color: tint-colors($dark-alt, 1.25%);
+  background-color: tint-colors($gray-900-alt, 1.25%);
   .username {
     color: $gray-400-alt;
   }
   .card-comment {
-    border-bottom-color: tint-colors($dark-alt, 7.5%);
+    border-bottom-color: tint-colors($gray-900-alt, 7.5%);
   }
 }
 
 .todo-list > li {
-  background-color: tint-colors($dark-alt, 5%);
-  border-color: tint-colors($dark-alt, 7.5%);
+  background-color: tint-colors($gray-900-alt, 5%);
+  border-color: tint-colors($gray-900-alt, 7.5%);
   color: $white-alt;
 }
 

src/scss/dark/_main-header.scss

@@ -3,7 +3,7 @@
   border-bottom-color: tint-color($dark-alt, 10%);
 
   .nav-link {
-    color: $gray-400-alt;
+    color: $body-color-alt;
 
     &:hover,
     &:focus {

src/scss/dark/_main-sidebar.scss

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

src/scss/dark/_variables-alt.scss

@@ -1,36 +1,18 @@
-// SIDEBAR SKINS
+// Dynamic Variables
 // --------------------------------------------------------
 
-// Dark sidebar
-$lte-sidebar-dark-bg-alt:                     $dark-alt !default;
-$lte-sidebar-dark-hover-bg-alt:             rgba(255, 255, 255, .1) !default;
-$lte-sidebar-dark-color-alt:                #c2c7d0 !default;
-$lte-sidebar-dark-hover-color-alt:            $white-alt !default;
-$lte-sidebar-dark-active-color-alt:           $white-alt !default;
-$lte-sidebar-dark-submenu-bg-alt:             transparent !default;
-$lte-sidebar-dark-submenu-color-alt:        #c2c7d0 !default;
-$lte-sidebar-dark-submenu-hover-color-alt:    $white-alt !default;
-$lte-sidebar-dark-submenu-hover-bg-alt:       $lte-sidebar-dark-hover-bg-alt !default;
-$lte-sidebar-dark-submenu-active-color-alt:   $lte-sidebar-dark-bg-alt !default;
-$lte-sidebar-dark-submenu-active-bg-alt:    rgba(255, 255, 255, .9) !default;
+:root {
+  // Dark Sidebar Native Variables
+  --lte-sidebar-dark-bg: #{$dark-alt};
 
-// Light sidebar
-$lte-sidebar-light-bg-alt:                     $white-alt !default;
-$lte-sidebar-light-hover-bg-alt:               rgba($black-alt, .1) !default;
-$lte-sidebar-light-color-alt:                  $gray-800-alt !default;
-$lte-sidebar-light-hover-color-alt:            $gray-900-alt !default;
-$lte-sidebar-light-active-color-alt:           $black-alt !default;
-$lte-sidebar-light-submenu-bg-alt:             transparent !default;
-$lte-sidebar-light-submenu-color-alt:        #777 !default;
-$lte-sidebar-light-submenu-hover-color-alt:    $black-alt !default;
-$lte-sidebar-light-submenu-hover-bg-alt:       $lte-sidebar-light-hover-bg-alt !default;
-$lte-sidebar-light-submenu-active-color-alt:   $lte-sidebar-light-hover-color-alt !default;
-$lte-sidebar-light-submenu-active-bg-alt:      $lte-sidebar-light-submenu-hover-bg-alt !default;
+  // Light Sidebar Native Variables
+  --lte-sidebar-light-bg: #{$white-alt};
+}
 
 // MAIN FOOTER
 // --------------------------------------------------------
 $lte-main-footer-bg-alt:          $dark-alt !default;
 
 // Body background (Affects main content background only)
-$lte-main-bg-alt:                 $black-alt !default;
+$lte-main-bg-alt:                 $gray-900-alt !default;
 $lte-main-color-alt:              $white-alt !default;

src/scss/dark/parts/_core.scss

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

src/scss/mixins/_nav-treeview-dark.scss

@@ -9,7 +9,8 @@
   $lte-sidebar-submenu-hover-color,
   $lte-sidebar-submenu-hover-bg,
   $lte-sidebar-submenu-active-color,
-  $lte-sidebar-submenu-active-bg
+  $lte-sidebar-submenu-active-bg,
+  $lte-sidebar-header-color
 ) {
   // Sidebar background color
   background-color: $lte-sidebar-bg;
@@ -45,7 +46,7 @@
   // Section Heading
   .nav-header {
     background-color: inherit; //darken($lte-sidebar-bg, 3%);
-    color: tint-color($lte-sidebar-color, 5%);
+    color: $lte-sidebar-header-color;
   }
 
   // All links within the sidebar menu

src/scss/mixins/_nav-treeview-light.scss

@@ -9,7 +9,8 @@
   $lte-sidebar-submenu-hover-color,
   $lte-sidebar-submenu-hover-bg,
   $lte-sidebar-submenu-active-color,
-  $lte-sidebar-submenu-active-bg
+  $lte-sidebar-submenu-active-bg,
+  $lte-sidebar-header-color
 ) {
   // Sidebar background color
   background-color: $lte-sidebar-bg;
@@ -45,7 +46,7 @@
   // Section Heading
   .nav-header {
     background-color: inherit;
-    color: shade-color($lte-sidebar-color, 5%);
+    color: $lte-sidebar-header-color;
   }
 
   // All links within the sidebar menu