dark mode 40% done

src/scss/_content-wrapper.scss

@@ -1,6 +1,6 @@
 .content-wrapper {
   grid-area: content-wrapper;
   padding-bottom: 1rem;
-  color: --#{$lte-prefix}main-color;
-  background-color: --#{$lte-prefix}main-bg;
+  color: var(--#{$lte-prefix}main-color);
+  background-color: var(--#{$lte-prefix}main-bg);
 }

src/scss/_direct-chat.scss

@@ -18,13 +18,13 @@
 
   &.timestamp-light {
     .direct-chat-timestamp {
-      color: tint-color(color-contrast($color-contrast-light), 10%);
+      color: rgba(var(--#{$prefix}body-color-rgb), .65);
     }
   }
 
   &.timestamp-dark {
     .direct-chat-timestamp {
-      color: shade-color(color-contrast($color-contrast-dark), 20%);
+      color: rgba(var(--#{$prefix}body-color-rgb), .9);
     }
   }
 }
@@ -123,7 +123,7 @@
 }
 
 .direct-chat-timestamp {
-  color: shade-color($gray-500, 25%);
+  color: rgba(var(--#{$prefix}body-color-rgb), .75);
 }
 
 //Direct chat contacts pane
@@ -141,23 +141,23 @@
   width: 100%;
   height: 250px;
   overflow: auto;
-  color: $white;
-  background-color: $dark;
+  color: var(--#{$prefix}body-bg);
+  background-color: var(--#{$prefix}body-color);
 }
 
 .direct-chat-contacts-light {
-  background-color: $light;
+  background-color: var(--#{$prefix}light-bg-subtle);
 
   .contacts-list-name {
-    color: $gray-700;
+    color: var(--#{$prefix}body-color);
   }
 
   .contacts-list-date {
-    color: $gray-600;
+    color: var(--#{$prefix}secondary-color);
   }
 
   .contacts-list-msg {
-    color: shade-color($gray-600, 10%);
+    color: var(--#{$prefix}secondary-color);
   }
 }
 
@@ -185,7 +185,7 @@
 
 .contacts-list-info {
   margin-left: 45px;
-  color: $white;
+  color: var(--#{$prefix}body-bg);
 }
 
 .contacts-list-name,
@@ -203,11 +203,11 @@
 
 .contacts-list-date {
   font-weight: 400;
-  color: $gray-400;
+  color: var(--#{$prefix}secondary-bg);
 }
 
 .contacts-list-msg {
-  color: shade-color($gray-400, 10%);
+  color: var(--#{$prefix}secondary-bg);
 }
 
 // Color variants

src/scss/_dropdown.scss

@@ -142,8 +142,8 @@
         position: absolute;
         right: 5%;
         left: auto;
-        background-color: $white;
-        border: 1px solid #ddd;
+        background-color: var(--#{$prefix}body-bg);
+        border: 1px solid var(--#{$prefix}border-color);
       }
     }
   }
@@ -178,7 +178,7 @@
         height: 90px;
         border: 3px solid;
         border-color: transparent;
-        border-color: rgba(255, 255, 255, .2);
+        border-color: var(--#{$prefix}border-color-translucent);
       }
 
       > p {
@@ -198,8 +198,8 @@
     > .user-body {
       @include clearfix ();
       padding: 15px;
-      border-top: 1px solid $gray-300;
-      border-bottom: 1px solid $gray-700;
+      border-top: 1px solid var(--#{$prefix}border-color);
+      border-bottom: 1px solid var(--#{$prefix}border-color-translucent);
 
       a {
         @include media-breakpoint-up(sm) {
@@ -213,7 +213,7 @@
     > .user-footer {
       @include clearfix ();
       padding: 10px;
-      background-color: var(--#{$prefix}secondary-bg);
+      background-color: var(--#{$prefix}light-bg);
 
       .btn-default {
         color: var(--#{$prefix}body-color);

src/scss/_info-box.scss

@@ -12,7 +12,8 @@
   min-height: 80px;
   padding: .5rem;
   margin-bottom: map-get($spacers, 3);
-  background-color: $white;
+  color: var(--#{$prefix}body-color);
+  background-color: var(--#{$prefix}body-bg);
 
   .progress {
     height: 2px;

src/scss/_main-header.scss

@@ -3,10 +3,10 @@
 //
 
 @include header-variant(
-  $lte-header-light-bg,
-  $lte-header-light-color,
-  $lte-header-mobile-light-bg,
-  $lte-header-mobile-light-color
+  var(--#{$lte-prefix}header-light-bg),
+  var(--#{$lte-prefix}header-light-color),
+  var(--#{$lte-prefix}header-mobile-light-bg),
+  var(--#{$lte-prefix}header-mobile-light-color)
 );
 
 .main-header {

src/scss/_main-sidebar.scss

@@ -4,35 +4,35 @@
 
 .sidebar-bg-dark {
   @include nav-treeview-dark (
-    $lte-sidebar-dark-bg,
-    $lte-sidebar-dark-hover-bg,
-    $lte-sidebar-dark-color,
-    $lte-sidebar-dark-hover-color,
-    $lte-sidebar-dark-active-color,
-    $lte-sidebar-dark-submenu-bg,
-    $lte-sidebar-dark-submenu-color,
-    $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-header-color
+    var(--#{$lte-prefix}sidebar-dark-bg),
+    var(--#{$lte-prefix}sidebar-dark-hover-bg),
+    var(--#{$lte-prefix}sidebar-dark-color),
+    var(--#{$lte-prefix}sidebar-dark-hover-color),
+    var(--#{$lte-prefix}sidebar-dark-active-color),
+    var(--#{$lte-prefix}sidebar-dark-submenu-bg),
+    var(--#{$lte-prefix}sidebar-dark-submenu-color),
+    var(--#{$lte-prefix}sidebar-dark-submenu-hover-color),
+    var(--#{$lte-prefix}sidebar-dark-submenu-hover-bg),
+    var(--#{$lte-prefix}sidebar-dark-submenu-active-color),
+    var(--#{$lte-prefix}sidebar-dark-submenu-active-bg),
+    var(--#{$lte-prefix}sidebar-dark-header-color)
   );
 }
 
 .sidebar-bg-light {
   @include nav-treeview-light (
-    $lte-sidebar-light-bg,
-    $lte-sidebar-light-hover-bg,
-    $lte-sidebar-light-color,
-    $lte-sidebar-light-hover-color,
-    $lte-sidebar-light-active-color,
-    $lte-sidebar-light-submenu-bg,
-    $lte-sidebar-light-submenu-color,
-    $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-header-color
+    var(--#{$lte-prefix}sidebar-light-bg),
+    var(--#{$lte-prefix}sidebar-light-hover-bg),
+    var(--#{$lte-prefix}sidebar-light-color),
+    var(--#{$lte-prefix}sidebar-light-hover-color),
+    var(--#{$lte-prefix}sidebar-light-active-color),
+    var(--#{$lte-prefix}sidebar-light-submenu-bg),
+    var(--#{$lte-prefix}sidebar-light-submenu-color),
+    var(--#{$lte-prefix}sidebar-light-submenu-hover-color),
+    var(--#{$lte-prefix}sidebar-light-submenu-hover-bg),
+    var(--#{$lte-prefix}sidebar-light-submenu-active-color),
+    var(--#{$lte-prefix}sidebar-light-submenu-active-bg),
+    var(--#{$lte-prefix}sidebar-light-header-color)
   );
 }
 

src/scss/_products.scss

@@ -15,7 +15,7 @@
     }
 
     padding: 10px 0;
-    background-color: $white;
+    background-color: var(--#{$prefix}body-bg);
 
   }
 
@@ -39,7 +39,7 @@
   .product-description {
     display: block;
     overflow: hidden;
-    color: $gray-600;
+    color: var(--#{$prefix}secondary-color);
     text-overflow: ellipsis;
     white-space: nowrap;
   }

src/scss/_root.scss

@@ -1,23 +1,61 @@
 :root {
-  --#{$lte-prefix}main-color: $lte-main-color;
-  --#{$lte-prefix}main-bg: $lte-main-bg;
+  // Content Wrapper
+  --#{$lte-prefix}main-color: #{$lte-main-color};
+  --#{$lte-prefix}main-bg: #{$lte-main-bg};
+
+  // Main Header
+  --#{$lte-prefix}header-light-bg: #{$lte-header-light-bg};
+  --#{$lte-prefix}header-light-color: #{$lte-header-light-color};
+  --#{$lte-prefix}header-mobile-light-bg: #{$lte-header-mobile-light-bg};
+  --#{$lte-prefix}header-mobile-light-color: #{$lte-header-mobile-light-color};
+
+  // Sidebar
+  --#{$lte-prefix}sidebar-width: #{$lte-sidebar-width};
+
+  // Sidebar active links
+  --#{$lte-prefix}sidebar-menu-active-bg: #{$lte-sidebar-menu-active-bg};
+  --#{$lte-prefix}sidebar-menu-active-color: #{$lte-sidebar-menu-active-color};
+
+  // Dark Sidebar Native Variables
+  --#{$lte-prefix}sidebar-dark-bg: #{$lte-sidebar-dark-bg};
+  --#{$lte-prefix}sidebar-dark-hover-bg: #{$lte-sidebar-dark-hover-bg};
+  --#{$lte-prefix}sidebar-dark-color: #{$lte-sidebar-dark-color};
+  --#{$lte-prefix}sidebar-dark-hover-color: #{$lte-sidebar-dark-hover-color};
+  --#{$lte-prefix}sidebar-dark-active-color: #{$lte-sidebar-dark-active-color};
+  --#{$lte-prefix}sidebar-dark-submenu-bg: #{$lte-sidebar-dark-submenu-bg};
+  --#{$lte-prefix}sidebar-dark-submenu-color: #{$lte-sidebar-dark-submenu-color};
+  --#{$lte-prefix}sidebar-dark-submenu-hover-color: #{$lte-sidebar-dark-submenu-hover-color};
+  --#{$lte-prefix}sidebar-dark-submenu-hover-bg: #{$lte-sidebar-dark-submenu-hover-bg};
+  --#{$lte-prefix}sidebar-dark-submenu-active-color: #{$lte-sidebar-dark-submenu-active-color};
+  --#{$lte-prefix}sidebar-dark-submenu-active-bg: #{$lte-sidebar-dark-submenu-active-bg};
+  --#{$lte-prefix}sidebar-dark-header-color: #{$lte-sidebar-dark-header-color};
+
+  // Light Sidebar Native Variables
+  --#{$lte-prefix}sidebar-light-bg: #{$lte-sidebar-light-bg};
+  --#{$lte-prefix}sidebar-light-hover-bg: #{$lte-sidebar-light-hover-bg};
+  --#{$lte-prefix}sidebar-light-color: #{$lte-sidebar-light-color};
+  --#{$lte-prefix}sidebar-light-hover-color: #{$lte-sidebar-light-hover-color};
+  --#{$lte-prefix}sidebar-light-active-color: #{$lte-sidebar-light-active-color};
+  --#{$lte-prefix}sidebar-light-submenu-bg: #{$lte-sidebar-light-submenu-bg};
+  --#{$lte-prefix}sidebar-light-submenu-color: #{$lte-sidebar-light-submenu-color};
+  --#{$lte-prefix}sidebar-light-submenu-hover-color: #{$lte-sidebar-light-submenu-hover-color};
+  --#{$lte-prefix}sidebar-light-submenu-hover-bg: #{$lte-sidebar-light-submenu-hover-bg};
+  --#{$lte-prefix}sidebar-light-submenu-active-color: #{$lte-sidebar-light-submenu-active-color};
+  --#{$lte-prefix}sidebar-light-submenu-active-bg: #{$lte-sidebar-light-submenu-active-bg};
+  --#{$lte-prefix}sidebar-light-header-color: #{$lte-sidebar-light-header-color};
 }
 
 @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};
+    --#{$lte-prefix}main-color: #{$lte-main-color-dark};
+    --#{$lte-prefix}main-bg: #{$lte-main-bg-dark};
 
-    // Dark Sidebar Native Variables
-    --#{$lte-prefix}sidebar-dark-bg: #{$dark};
+    // // Dark Sidebar Native Variables
+    --#{$lte-prefix}sidebar-dark-bg: #{$lte-sidebar-dark-bg-dark};
 
-    // Light Sidebar Native Variables
-    --#{$lte-prefix}sidebar-light-bg: #{$white};
+    // // Light Sidebar Native Variables
+    --#{$lte-prefix}sidebar-light-bg: #{$lte-sidebar-light-bg-dark};
   }
 }

src/scss/_sidebar-close.scss

@@ -1,6 +1,6 @@
 .sidebar-close:not(.sidebar-horizontal) {
   .main-sidebar {
     // stylelint-disable-next-line
-    margin-left: calc(#{$lte-sidebar-width} * -1);
+    margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1);
   }
 }

src/scss/_users-list.scss

@@ -20,7 +20,7 @@
     > a:hover {
       &,
       .users-list-name {
-        color: #999;
+        color: var(--#{$prefix}body-color);
       }
     }
   }
@@ -34,12 +34,12 @@
 .users-list-name {
   overflow: hidden;
   font-size: $font-size-sm;
-  color: $gray-700;
+  color: var(--#{$prefix}secondary-color);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .users-list-date {
   font-size: 12px;
-  color: shade-color($gray-500, 20%);
+  color: var(--#{$prefix}tertiary-color);
 }

src/scss/_variables-dark.scss

@@ -1,3 +1,9 @@
 // Body background (Affects main content background only)
 $lte-main-bg-dark:                 $body-bg-dark !default;
 $lte-main-color-dark:              $body-color-dark !default;
+
+// Dark sidebar
+$lte-sidebar-dark-bg-dark:         $dark !default;
+
+// Light sidebar
+$lte-sidebar-light-bg-dark:        $light !default;

src/scss/_variables.scss

@@ -3,49 +3,6 @@
 // Prefix for :root CSS variables
 $lte-prefix:                      lte- !default;
 
-// COLORS
-// --------------------------------------------------------
-$lte-gray-x-light: #d2d6de !default;
-
-// Dynamic Variables
-// --------------------------------------------------------
-:root {
-  // Sidebar
-  --#{$lte-prefix}sidebar-width: 250px;
-
-  // 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: #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-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
 // --------------------------------------------------------
 
@@ -60,7 +17,7 @@ $lte-transition-fn:               ease-in-out !default;
 
 // Sidebar
 // --------------------------------------------------------
-$lte-sidebar-width:               var(--#{$lte-prefix}sidebar-width) !default;
+$lte-sidebar-width:               250px !default;
 $lte-sidebar-padding-x:           .5rem !default;
 $lte-sidebar-padding-y:           .5rem !default;
 $lte-sidebar-custom-height:       4rem !default;
@@ -73,39 +30,40 @@ $lte-sidebar-transition:          min-width $lte-transition-speed $lte-transitio
   margin-left $lte-transition-speed $lte-transition-fn,
   margin-right $lte-transition-speed $lte-transition-fn !default;
 
-// margin-top $lte-transition-speed $lte-transition-fn,
-// transform $lte-transition-speed $lte-transition-fn;
-
 // SIDEBAR SKINS
 // --------------------------------------------------------
 
+// Sidebar active links
+$lte-sidebar-menu-active-bg:              $primary !default;
+$lte-sidebar-menu-active-color:           $white !default;
+
 // Dark sidebar
-$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;
+$lte-sidebar-dark-bg:                     #343a40 !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:          $lte-sidebar-dark-color !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-header-color:           tint-color(#c2c7d0, 5%) !default;
 
 // Light sidebar
-$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;
+$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-header-color:          shade-color($gray-800, 5%) !default;
 
 // SIDEBAR MINI
 // --------------------------------------------------------
@@ -125,7 +83,7 @@ $lte-control-sidebar-width:       $lte-sidebar-width !default;
 // MAIN HEADER
 // --------------------------------------------------------
 $lte-main-header-bottom-border-width:  $border-width !default;
-$lte-main-header-bottom-border-color:  $gray-300 !default;
+$lte-main-header-bottom-border-color:  var(--#{$prefix}border-color) !default;
 $lte-main-header-bottom-border:        $lte-main-header-bottom-border-width solid $lte-main-header-bottom-border-color !default;
 $lte-main-header-link-padding-y:       $navbar-padding-y !default;
 $lte-main-header-height-inner:         ($nav-link-height + ($lte-main-header-link-padding-y * 2)) !default;
@@ -149,9 +107,9 @@ $lte-content-padding-x:           .5rem !default;
 
 // IMAGE SIZES
 // --------------------------------------------------------
-$lte-img-size-sm: 1.875rem !default;
-$lte-img-size-md: 3.75rem !default;
-$lte-img-size-lg: 6.25rem !default;
+$lte-img-size-sm:   1.875rem !default;
+$lte-img-size-md:   3.75rem !default;
+$lte-img-size-lg:   6.25rem !default;
 $lte-img-size-push: .625rem !default;
 
 // MAIN FOOTER
@@ -159,7 +117,7 @@ $lte-img-size-push: .625rem !default;
 $lte-main-footer-padding:           1rem !default;
 $lte-main-footer-padding-sm:        $lte-main-footer-padding * .812 !default;
 $lte-main-footer-border-top-width:  1px !default;
-$lte-main-footer-border-top-color:  $gray-300 !default;
+$lte-main-footer-border-top-color:  var(--#{$prefix}border-color) !default;
 $lte-main-footer-border-top:        $lte-main-footer-border-top-width solid $lte-main-footer-border-top-color !default;
 $lte-main-footer-height-inner:      (($lte-font-size-root * $line-height-base) + ($lte-main-footer-padding * 2)) !default;
 $lte-main-footer-height:            add($lte-main-footer-height-inner, $lte-main-footer-border-top-width) !default;
@@ -177,7 +135,7 @@ $lte-brand-link-border-buttom:    1px !default;
 // Cards
 // --------------------------------------------------------
 $lte-card-dark-border-color: tint-color($gray-900, 10%) !default;
-$lte-card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
+$lte-card-shadow: 0 0 1px rgba(var(--#{$prefix}body-color-rgb), .125), 0 1px 3px rgba(var(--#{$prefix}body-color-rgb), .2) !default;
 $lte-card-title-font-size: 1.1rem !default;
 $lte-card-title-font-size-sm: 1rem !default;
 $lte-card-title-font-weight: $font-weight-normal !default;
@@ -191,9 +149,9 @@ $lte-progress-bar-border-radius: 1px !default;
 
 // DIRECT CHAT
 // --------------------------------------------------------
-$lte-direct-chat-default-msg-bg: $lte-gray-x-light !default;
-$lte-direct-chat-default-font-color: #444 !default;
-$lte-direct-chat-default-msg-border-color: $lte-gray-x-light !default;
+$lte-direct-chat-default-msg-bg: var(--#{$prefix}secondary-bg) !default;
+$lte-direct-chat-default-font-color: var(--#{$prefix}body-color) !default;
+$lte-direct-chat-default-msg-border-color: var(--#{$prefix}border-color) !default;
 
 // Z-INDEX
 // --------------------------------------------------------

src/scss/pages/_login_and_register.scss

@@ -10,7 +10,7 @@
   text-align: center;
 
   a {
-    color: $gray-700;
+    color: var(--#{$prefix}secondary-color);
   }
 }
 
@@ -21,7 +21,7 @@
   align-items: center;
   justify-content: center;
   height: 100vh;
-  background-color: $gray-200;
+  background-color: var(--#{$prefix}secondary-bg);
 }
 
 .login-box,
@@ -41,8 +41,8 @@
 .login-card-body,
 .register-card-body {
   padding: 20px;
-  color: #666;
-  background-color: $white;
+  color: var(--#{$prefix}secondary-color);
+  background-color: var(--#{$prefix}body-bg);
   border-top: 0;
 
   .input-group {
@@ -81,7 +81,7 @@
     }
 
     .input-group-text {
-      color: #777;
+      color: var(--#{$prefix}secondary-color);
       background-color: transparent;
       border-left: 0;
       @include border-top-end-radius($border-radius);