From fd7730baa50ac994065bbaefbf944a7a68dc0fa0 Mon Sep 17 00:00:00 2001
From: Daniel <50356015+danny007in@users.noreply.github.com>
Date: Fri, 27 Jan 2023 01:35:46 +0530
Subject: [PATCH] 10% dark mode implemented

---
 .bundlewatch.config.json                   |   8 --
 src/scss/_content-wrapper.scss             |   4 +-
 src/scss/_dropdown.scss                    |  10 +-
 src/scss/_main-sidebar.scss                |   4 +-
 src/scss/_root.scss                        |  23 ++++
 src/scss/_variables-dark.scss              |   3 +
 src/scss/_variables.scss                   | 126 ++++++++++-----------
 src/scss/_wrapper.scss                     |   1 -
 src/scss/adminlte.scss                     |   1 +
 src/scss/dark/_cards.scss                  |  57 ----------
 src/scss/dark/_content-wrapper.scss        |   4 -
 src/scss/dark/_direct-chat.scss            |  72 ------------
 src/scss/dark/_info-box.scss               |  15 ---
 src/scss/dark/_main-footer.scss            |   4 -
 src/scss/dark/_main-header.scss            |  13 ---
 src/scss/dark/_products.scss               |   9 --
 src/scss/dark/_variables-alt.scss          |  22 ----
 src/scss/dark/adminlte-dark-addon.scss     |  31 -----
 src/scss/dark/parts/_components.scss       |   5 -
 src/scss/dark/parts/_core.scss             |   3 -
 src/scss/dark/parts/_extra-components.scss |   7 --
 src/scss/dark/parts/_miscellaneous.scss    |   7 --
 src/scss/mixins/_header-variant.scss       |   9 --
 src/scss/parts/_core.scss                  |   1 +
 24 files changed, 98 insertions(+), 341 deletions(-)
 create mode 100644 src/scss/_root.scss
 create mode 100644 src/scss/_variables-dark.scss
 delete mode 100644 src/scss/dark/_cards.scss
 delete mode 100644 src/scss/dark/_content-wrapper.scss
 delete mode 100644 src/scss/dark/_direct-chat.scss
 delete mode 100644 src/scss/dark/_info-box.scss
 delete mode 100644 src/scss/dark/_main-footer.scss
 delete mode 100644 src/scss/dark/_main-header.scss
 delete mode 100644 src/scss/dark/_products.scss
 delete mode 100644 src/scss/dark/_variables-alt.scss
 delete mode 100644 src/scss/dark/adminlte-dark-addon.scss
 delete mode 100644 src/scss/dark/parts/_components.scss
 delete mode 100644 src/scss/dark/parts/_core.scss
 delete mode 100644 src/scss/dark/parts/_extra-components.scss
 delete mode 100644 src/scss/dark/parts/_miscellaneous.scss

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index f81a03202..c856ef1fa 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -8,14 +8,6 @@
       "path": "./dist/css/adminlte.min.css",
       "maxSize": "35.1 kB"
     },
-    {
-      "path": "./dist/css/dark/adminlte-dark-addon.css",
-      "maxSize": "10.17 kB"
-    },
-    {
-      "path": "./dist/css/dark/adminlte-dark-addon.min.css",
-      "maxSize": "9.9 kB"
-    },
     {
       "path": "./dist/css/rtl/adminlte.rtl.css",
       "maxSize": "37.80 kB"
diff --git a/src/scss/_content-wrapper.scss b/src/scss/_content-wrapper.scss
index 4f2a7b4c0..0a44a5cb4 100644
--- a/src/scss/_content-wrapper.scss
+++ b/src/scss/_content-wrapper.scss
@@ -1,6 +1,6 @@
 .content-wrapper {
   grid-area: content-wrapper;
   padding-bottom: 1rem;
-  color: $lte-main-color;
-  background-color: $lte-main-bg;
+  color: --#{$lte-prefix}main-color;
+  background-color: --#{$lte-prefix}main-bg;
 }
diff --git a/src/scss/_dropdown.scss b/src/scss/_dropdown.scss
index ddb5cbfd3..2cfb476cd 100644
--- a/src/scss/_dropdown.scss
+++ b/src/scss/_dropdown.scss
@@ -203,8 +203,8 @@
 
       a {
         @include media-breakpoint-up(sm) {
-          color: $gray-700 !important;
-          background-color: $white !important;
+          color: var(--#{$prefix}body-color) !important;
+          background-color: var(--#{$prefix}body-bg) !important;
         }
       }
     }
@@ -213,14 +213,14 @@
     > .user-footer {
       @include clearfix ();
       padding: 10px;
-      background-color: $gray-100;
+      background-color: var(--#{$prefix}secondary-bg);
 
       .btn-default {
-        color: $gray-600;
+        color: var(--#{$prefix}body-color);
 
         &:hover {
           @include media-breakpoint-up(sm) {
-            background-color: $gray-100;
+            background-color: var(--#{$prefix}body-bg);
           }
         }
       }
diff --git a/src/scss/_main-sidebar.scss b/src/scss/_main-sidebar.scss
index 8f487461d..0c8d8db00 100644
--- a/src/scss/_main-sidebar.scss
+++ b/src/scss/_main-sidebar.scss
@@ -49,8 +49,8 @@
 
   .nav-sidebar > .nav-item {
     > .nav-link.active {
-      color: var(--lte-sidebar-menu-active-color);
-      background-color: var(--lte-sidebar-menu-active-bg);
+      color: var(--#{$lte-prefix}sidebar-menu-active-color);
+      background-color: var(--#{$lte-prefix}sidebar-menu-active-bg);
     }
   }
 }
diff --git a/src/scss/_root.scss b/src/scss/_root.scss
new file mode 100644
index 000000000..1e008e026
--- /dev/null
+++ b/src/scss/_root.scss
@@ -0,0 +1,23 @@
+:root {
+  --#{$lte-prefix}main-color: $lte-main-color;
+  --#{$lte-prefix}main-bg: $lte-main-bg;
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    color-scheme: dark;
+    // Body Color
+    --#{$lte-prefix}main-color: $lte-main-color-dark;
+    --#{$lte-prefix}main-bg: $lte-main-bg-dark;
+
+    // Sidebar active links
+    --#{$lte-prefix}sidebar-menu-active-bg: #{$primary};
+    --#{$lte-prefix}sidebar-menu-active-color: #{$white};
+
+    // Dark Sidebar Native Variables
+    --#{$lte-prefix}sidebar-dark-bg: #{$dark};
+
+    // Light Sidebar Native Variables
+    --#{$lte-prefix}sidebar-light-bg: #{$white};
+  }
+}
diff --git a/src/scss/_variables-dark.scss b/src/scss/_variables-dark.scss
new file mode 100644
index 000000000..15b2a7283
--- /dev/null
+++ b/src/scss/_variables-dark.scss
@@ -0,0 +1,3 @@
+// Body background (Affects main content background only)
+$lte-main-bg-dark:                 $body-bg-dark !default;
+$lte-main-color-dark:              $body-color-dark !default;
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 773c1055f..09723b67e 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,5 +1,8 @@
 // Custom AdminLTE Variables
 
+// Prefix for :root CSS variables
+$lte-prefix:                      lte- !default;
+
 // COLORS
 // --------------------------------------------------------
 $lte-gray-x-light: #d2d6de !default;
@@ -8,39 +11,39 @@ $lte-gray-x-light: #d2d6de !default;
 // --------------------------------------------------------
 :root {
   // Sidebar
-  --lte-sidebar-width: 250px;
+  --#{$lte-prefix}sidebar-width: 250px;
 
   // Sidebar active links
-  --lte-sidebar-menu-active-bg: #{$primary};
-  --lte-sidebar-menu-active-color: #{$white};
+  --#{$lte-prefix}sidebar-menu-active-bg: #{$primary};
+  --#{$lte-prefix}sidebar-menu-active-color: #{$white};
 
   // 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%)};
+  --#{$lte-prefix}sidebar-dark-bg: #343a40;
+  --#{$lte-prefix}sidebar-dark-hover-bg: rgba(255, 255, 255, .1);
+  --#{$lte-prefix}sidebar-dark-color: #c2c7d0;
+  --#{$lte-prefix}sidebar-dark-hover-color: #{$white};
+  --#{$lte-prefix}sidebar-dark-active-color: #{$white};
+  --#{$lte-prefix}sidebar-dark-submenu-bg: transparent;
+  --#{$lte-prefix}sidebar-dark-submenu-color: var(--#{$lte-prefix}sidebar-dark-color);
+  --#{$lte-prefix}sidebar-dark-submenu-hover-color: #{$white};
+  --#{$lte-prefix}sidebar-dark-submenu-hover-bg: var(--#{$lte-prefix}sidebar-dark-hover-bg);
+  --#{$lte-prefix}sidebar-dark-submenu-active-color: var(--#{$lte-prefix}sidebar-dark-bg);
+  --#{$lte-prefix}sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9);
+  --#{$lte-prefix}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%)};
+  --#{$lte-prefix}sidebar-light-bg: #{$white};
+  --#{$lte-prefix}sidebar-light-hover-bg: rgba(#{$black}, .1);
+  --#{$lte-prefix}sidebar-light-color: #{$gray-800};
+  --#{$lte-prefix}sidebar-light-hover-color: #{$gray-900};
+  --#{$lte-prefix}sidebar-light-active-color: #{$black};
+  --#{$lte-prefix}sidebar-light-submenu-bg: transparent;
+  --#{$lte-prefix}sidebar-light-submenu-color: #777;
+  --#{$lte-prefix}sidebar-light-submenu-hover-color: #{$black};
+  --#{$lte-prefix}sidebar-light-submenu-hover-bg: var(--#{$lte-prefix}sidebar-light-hover-bg);
+  --#{$lte-prefix}sidebar-light-submenu-active-color: var(--#{$lte-prefix}sidebar-light-hover-color);
+  --#{$lte-prefix}sidebar-light-submenu-active-bg: var(--#{$lte-prefix}sidebar-light-submenu-hover-bg);
+  --#{$lte-prefix}sidebar-light-header-color: #{shade-color($gray-800, 5%)};
 }
 
 // LAYOUT
@@ -57,7 +60,7 @@ $lte-transition-fn:               ease-in-out !default;
 
 // Sidebar
 // --------------------------------------------------------
-$lte-sidebar-width:               var(--lte-sidebar-width) !default;
+$lte-sidebar-width:               var(--#{$lte-prefix}sidebar-width) !default;
 $lte-sidebar-padding-x:           .5rem !default;
 $lte-sidebar-padding-y:           .5rem !default;
 $lte-sidebar-custom-height:       4rem !default;
@@ -77,32 +80,32 @@ $lte-sidebar-transition:          min-width $lte-transition-speed $lte-transitio
 // --------------------------------------------------------
 
 // Dark sidebar
-$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;
+$lte-sidebar-dark-bg:                   var(--#{$lte-prefix}sidebar-dark-bg) !default;
+$lte-sidebar-dark-hover-bg:             var(--#{$lte-prefix}sidebar-dark-hover-bg) !default;
+$lte-sidebar-dark-color:                var(--#{$lte-prefix}sidebar-dark-color) !default;
+$lte-sidebar-dark-hover-color:          var(--#{$lte-prefix}sidebar-dark-hover-color) !default;
+$lte-sidebar-dark-active-color:         var(--#{$lte-prefix}sidebar-dark-active-color) !default;
+$lte-sidebar-dark-submenu-bg:           var(--#{$lte-prefix}sidebar-dark-submenu-bg) !default;
+$lte-sidebar-dark-submenu-color:        var(--#{$lte-prefix}sidebar-dark-submenu-color) !default;
+$lte-sidebar-dark-submenu-hover-color:  var(--#{$lte-prefix}sidebar-dark-submenu-hover-color) !default;
+$lte-sidebar-dark-submenu-hover-bg:     var(--#{$lte-prefix}sidebar-dark-submenu-hover-bg) !default;
+$lte-sidebar-dark-submenu-active-color: var(--#{$lte-prefix}sidebar-dark-submenu-active-color) !default;
+$lte-sidebar-dark-submenu-active-bg:    var(--#{$lte-prefix}sidebar-dark-submenu-active-bg) !default;
+$lte-sidebar-dark-header-color:         var(--#{$lte-prefix}sidebar-dark-header-color) !default;
 
 // Light sidebar
-$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;
+$lte-sidebar-light-bg:                   var(--#{$lte-prefix}sidebar-light-bg) !default;
+$lte-sidebar-light-hover-bg:             var(--#{$lte-prefix}sidebar-light-hover-bg) !default;
+$lte-sidebar-light-color:                var(--#{$lte-prefix}sidebar-light-color) !default;
+$lte-sidebar-light-hover-color:          var(--#{$lte-prefix}sidebar-light-hover-color) !default;
+$lte-sidebar-light-active-color:         var(--#{$lte-prefix}sidebar-light-active-color) !default;
+$lte-sidebar-light-submenu-bg:           var(--#{$lte-prefix}sidebar-light-submenu-bg) !default;
+$lte-sidebar-light-submenu-color:        var(--#{$lte-prefix}sidebar-light-submenu-color) !default;
+$lte-sidebar-light-submenu-hover-color:  var(--#{$lte-prefix}sidebar-light-submenu-hover-color) !default;
+$lte-sidebar-light-submenu-hover-bg:     var(--#{$lte-prefix}sidebar-light-submenu-hover-bg) !default;
+$lte-sidebar-light-submenu-active-color: var(--#{$lte-prefix}sidebar-light-submenu-active-color) !default;
+$lte-sidebar-light-submenu-active-bg:    var(--#{$lte-prefix}sidebar-light-submenu-active-bg) !default;
+$lte-sidebar-light-header-color:         var(--#{$lte-prefix}sidebar-light-header-color) !default;
 
 // SIDEBAR MINI
 // --------------------------------------------------------
@@ -135,17 +138,10 @@ $lte-main-header-height-sm:            add($lte-main-header-height-sm-inner, $lt
 // HEADER SKINS
 // --------------------------------------------------------
 
-// Dark sidebar
-$lte-header-dark-bg:              $dark !default;
-$lte-header-dark-color:           $white !default;
-$lte-header-mobile-dark-bg:       $dark !default;
-$lte-header-mobile-dark-color:    $white !default;
-
-// Light sidebar
-$lte-header-light-bg:             $white !default;
-$lte-header-light-color:          $dark !default;
-$lte-header-mobile-light-bg:      $light !default;
-$lte-header-mobile-light-color:   $dark !default;
+$lte-header-light-bg:             var(--#{$prefix}body-bg) !default;
+$lte-header-light-color:          var(--#{$prefix}body-color) !default;
+$lte-header-mobile-light-bg:      $lte-header-light-bg !default;
+$lte-header-mobile-light-color:   $lte-header-light-color !default;
 
 // Content padding
 $lte-content-padding-y:           0 !default;
@@ -169,8 +165,8 @@ $lte-main-footer-height-inner:      (($lte-font-size-root * $line-height-base) +
 $lte-main-footer-height:            add($lte-main-footer-height-inner, $lte-main-footer-border-top-width) !default;
 $lte-main-footer-height-sm-inner:   (($font-size-sm * $line-height-base) + ($lte-main-footer-padding-sm * 2)) !default;
 $lte-main-footer-height-sm:         add($lte-main-footer-height-sm-inner, $lte-main-footer-border-top-width) !default;
-$lte-main-footer-bg:                $white !default;
-$lte-main-footer-color:             tint-color($gray-700, 25%) !default;
+$lte-main-footer-bg:                var(--#{$prefix}body-bg) !default;
+$lte-main-footer-color:             var(--#{$prefix}secondary-color) !default;
 
 // BRAND LINK
 // --------------------------------------------------------
diff --git a/src/scss/_wrapper.scss b/src/scss/_wrapper.scss
index 42b3f2369..85b5c613b 100644
--- a/src/scss/_wrapper.scss
+++ b/src/scss/_wrapper.scss
@@ -14,6 +14,5 @@
   grid-gap: 0;
   align-content: stretch;
   align-items: stretch;
-
   min-height: 100vh;
 }
diff --git a/src/scss/adminlte.scss b/src/scss/adminlte.scss
index b7b07227c..29ce38d3d 100644
--- a/src/scss/adminlte.scss
+++ b/src/scss/adminlte.scss
@@ -65,6 +65,7 @@
 // AdminLTE Configuration
 // ---------------------------------------------------
 @import "variables";
+@import "variables-dark";
 @import "mixins";
 
 // AdiminLTE Parts
diff --git a/src/scss/dark/_cards.scss b/src/scss/dark/_cards.scss
deleted file mode 100644
index faaf59e24..000000000
--- a/src/scss/dark/_cards.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-// 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 {
-  .card {
-    background-color: tint-colors($gray-900-alt, 5%);
-  }
-  .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($gray-900-alt, 1.25%);
-  .username {
-    color: $gray-400-alt;
-  }
-  .card-comment {
-    border-bottom-color: tint-colors($gray-900-alt, 7.5%);
-  }
-}
-
-.todo-list > li {
-  color: $white-alt;
-  background-color: tint-colors($gray-900-alt, 5%);
-  border-color: tint-colors($gray-900-alt, 7.5%);
-}
-
-.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;
-    }
-  }
-}
diff --git a/src/scss/dark/_content-wrapper.scss b/src/scss/dark/_content-wrapper.scss
deleted file mode 100644
index 475c14988..000000000
--- a/src/scss/dark/_content-wrapper.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.content-wrapper {
-  color: $lte-main-color-alt;
-  background-color: $lte-main-bg-alt;
-}
diff --git a/src/scss/dark/_direct-chat.scss b/src/scss/dark/_direct-chat.scss
deleted file mode 100644
index f04007f2b..000000000
--- a/src/scss/dark/_direct-chat.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-.direct-chat-text {
-  color: $white-alt;
-  background-color: $gray-800-alt;
-  border-color: tint-color($gray-800-alt, 10%);
-
-  &::after,
-  &::before {
-    border-right-color: $gray-800-alt;
-  }
-}
-
-.direct-chat-timestamp {
-  color: $gray-300-alt;
-}
-
-.end > .direct-chat-text {
-  &::after,
-  &::before {
-    border-right-color: transparent;
-  }
-}
-
-.direct-chat-contacts {
-  color: $white-alt;
-  background-color: $gray-800-alt;
-}
-
-.direct-chat-contacts-light {
-  background-color: $dark-alt;
-
-  .contacts-list-name {
-    color: $light-alt;
-  }
-
-  .contacts-list-date {
-    color: $gray-200-alt;
-  }
-
-  .contacts-list-msg {
-    color: $gray-300-alt;
-  }
-}
-
-//Contacts list -- for displaying contacts in direct chat contacts pane
-.contacts-list > li {
-  border-bottom-color: rgba($white-alt, .2);
-}
-
-.contacts-list-info {
-  color: $white-alt;
-}
-
-.contacts-list-date {
-  color: $gray-300-alt;
-}
-
-.contacts-list-msg {
-  color: $gray-400-alt;
-}
-
-// Color variants
-@each $name, $color in $theme-colors-alt {
-  .direct-chat-#{$name} {
-    @include direct-chat-variant($color);
-  }
-}
-
-@each $name, $color in $colors-alt {
-  .direct-chat-#{$name} {
-    @include direct-chat-variant($color);
-  }
-}
diff --git a/src/scss/dark/_info-box.scss b/src/scss/dark/_info-box.scss
deleted file mode 100644
index d48a39022..000000000
--- a/src/scss/dark/_info-box.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.info-box {
-  color: $white-alt;
-  background-color: $dark-alt;
-  @each $name, $color in $theme-colors-alt {
-    .info-box {
-      .bg-#{$name} {
-        color: color-contrast($color);
-
-        .progress-bar {
-          background-color: color-contrast($color);
-        }
-      }
-    }
-  }
-}
diff --git a/src/scss/dark/_main-footer.scss b/src/scss/dark/_main-footer.scss
deleted file mode 100644
index 665210c12..000000000
--- a/src/scss/dark/_main-footer.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.main-footer {
-  background-color: $lte-main-footer-bg-alt;
-  border-top-color: tint-color($dark-alt, 10%);
-}
diff --git a/src/scss/dark/_main-header.scss b/src/scss/dark/_main-header.scss
deleted file mode 100644
index c95fb5ec5..000000000
--- a/src/scss/dark/_main-header.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.main-header {
-  background-color: $dark-alt;
-  border-bottom-color: tint-color($dark-alt, 10%);
-
-  .nav-link {
-    color: $body-color-alt;
-
-    &:hover,
-    &:focus {
-      color: $white-alt;
-    }
-  }
-}
diff --git a/src/scss/dark/_products.scss b/src/scss/dark/_products.scss
deleted file mode 100644
index b692fb1a3..000000000
--- a/src/scss/dark/_products.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.products-list > .item {
-  color: $body-color-alt;
-  background-color: $body-bg-alt;
-  border-bottom-color: $gray-600-alt;
-}
-
-.product-description {
-  color: $gray-200-alt;
-}
diff --git a/src/scss/dark/_variables-alt.scss b/src/scss/dark/_variables-alt.scss
deleted file mode 100644
index 599d4dfb9..000000000
--- a/src/scss/dark/_variables-alt.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// Dynamic Variables
-// --------------------------------------------------------
-
-:root {
-  // Sidebar active links
-  --lte-sidebar-menu-active-bg: #{$primary-alt};
-  --lte-sidebar-menu-active-color: #{$white-alt};
-
-  // Dark Sidebar Native Variables
-  --lte-sidebar-dark-bg: #{$dark-alt};
-
-  // 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:                 $gray-900-alt !default;
-$lte-main-color-alt:              $white-alt !default;
diff --git a/src/scss/dark/adminlte-dark-addon.scss b/src/scss/dark/adminlte-dark-addon.scss
deleted file mode 100644
index 840b7587b..000000000
--- a/src/scss/dark/adminlte-dark-addon.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/*!
- *   AdminLTE Dark mode Add-on v4.0.0-alpha.1
- *   Author: Colorlib
- *   Website: AdminLTE.io <https://adminlte.io>
- *   License: Open source - MIT <https://opensource.org/licenses/MIT>
- */
-
-// Configuration
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";  // defaults are here
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
-
-// stylelint-disable no-invalid-position-at-import-rule
-
-:root { color-scheme: dark; }
-
-// Layout & components
-
-// Helpers
-
-// Utilities
-
-// Unique to dark-mode
-
-// AdminLTE dark
-@import "variables-alt";
-@import "../mixins";
-@import "parts/core";
-@import "parts/components";
-@import "parts/extra-components";
diff --git a/src/scss/dark/parts/_components.scss b/src/scss/dark/parts/_components.scss
deleted file mode 100644
index e4cdc8233..000000000
--- a/src/scss/dark/parts/_components.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-//
-// Part: Components
-//
-
-@import "../cards";
diff --git a/src/scss/dark/parts/_core.scss b/src/scss/dark/parts/_core.scss
deleted file mode 100644
index 402a22259..000000000
--- a/src/scss/dark/parts/_core.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "../main-header";
-@import "../content-wrapper";
-@import "../main-footer";
diff --git a/src/scss/dark/parts/_extra-components.scss b/src/scss/dark/parts/_extra-components.scss
deleted file mode 100644
index 32a224821..000000000
--- a/src/scss/dark/parts/_extra-components.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-//
-// Part: Extra Components
-//
-
-@import "../info-box";
-@import "../direct-chat";
-@import "../products";
diff --git a/src/scss/dark/parts/_miscellaneous.scss b/src/scss/dark/parts/_miscellaneous.scss
deleted file mode 100644
index 6f0863c3b..000000000
--- a/src/scss/dark/parts/_miscellaneous.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-//
-// Part: Miscellaneous
-//
-
-@import "../miscellaneous";
-@import "../text";
-@import "../colors";
diff --git a/src/scss/mixins/_header-variant.scss b/src/scss/mixins/_header-variant.scss
index 2878984e4..99a28bae1 100644
--- a/src/scss/mixins/_header-variant.scss
+++ b/src/scss/mixins/_header-variant.scss
@@ -11,15 +11,6 @@
   .main-header {
     color: $lte-header-color;
     background-color: $lte-header-bg;
-
-    .nav-link {
-      color: $dark;
-
-      &:hover,
-      &:focus {
-        color: $black;
-      }
-    }
   }
 
   @include media-breakpoint-down(lg) {
diff --git a/src/scss/parts/_core.scss b/src/scss/parts/_core.scss
index a3259fdc2..aeae3d819 100644
--- a/src/scss/parts/_core.scss
+++ b/src/scss/parts/_core.scss
@@ -2,6 +2,7 @@
 // Part: Core
 //
 
+@import "../root";
 @import "../wrapper";
 @import "../main-header";
 @import "../brand-container";