improve dark mode variables

src/scss/_brand-container.scss

@@ -18,7 +18,6 @@
     grid-area: brand-link;
 
     &:hover {
-      color: $white;
       text-decoration: none;
     }
 
@@ -38,7 +37,7 @@
   }
 
   .sidebar-bg-dark & {
-    border-bottom: $lte-brand-link-border-buttom solid tint-color($dark, 10%);
+    border-bottom: $lte-brand-link-border-buttom solid $gray-700;
 
     .brand-link,
     .pushmenu {

src/scss/_main-sidebar.scss

@@ -36,9 +36,9 @@
   );
 }
 
-.sidebar-color-primary {
+// .sidebar-color-primary {
-  @include sidebar-color($primary);
+//   @include sidebar-color($primary);
-}
+// }
 
 .main-sidebar {
   grid-area: main-sidebar;
@@ -46,4 +46,11 @@
   z-index: $lte-zindex-sidebar;
   min-width: $lte-sidebar-width;
   max-width: $lte-sidebar-width;
+
+  .nav-sidebar > .nav-item {
+    > .nav-link.active {
+      background-color: var(--lte-sidebar-menu-active-bg);
+      color: var(--lte-sidebar-menu-active-color);
+    }
+  }
 }

src/scss/_mixins.scss

@@ -6,7 +6,6 @@
 @import "mixins/scrollbar";
 @import "mixins/brand-variant";
 @import "mixins/header-variant";
-@import "mixins/sidebar-color";
 @import "mixins/nav-treeview-dark";
 @import "mixins/nav-treeview-light";
 @import "mixins/cards";

src/scss/_sidebar-close.scss

@@ -1,32 +1,6 @@
 .sidebar-close:not(.sidebar-horizontal) {
   .main-sidebar {
-    margin-left: -#{$lte-sidebar-width};
+    // stylelint-disable-next-line
-  }
+    margin-left: calc(#{$lte-sidebar-width} * -1);
-  // @include media-breakpoint-up(md) {
-  //   .main-brand {
-  //     margin-left: -#{$lte-sidebar-width};
-  //   }
-  // }
-}
-
-@include media-breakpoint-up(sm) {
-  .layout-fixed {
-    // .main-header,
-    // .content-wrapper,
-    // .main-footer {
-    //   margin-left: 0;
-    // }
-    // .main-header,
-    // .content-wrapper,
-    // .main-footer {
-    //   margin-left: $lte-sidebar-width;
-    // }
-    // &.sidebar-collapse {
-    //   .main-header,
-    //   .content-wrapper,
-    //   .main-footer {
-    //     margin-left: $lte-sidebar-mini-width;
-    //   }
-    // }
   }
 }

src/scss/_variables.scss

@@ -45,6 +45,13 @@ $navbar-nav-link-padding-x:         1rem;
 // Dynamic Variables
 // --------------------------------------------------------
 :root {
+  // Sidebar
+  --lte-sidebar-width: 250px;
+
+  // Sidebar active links
+  --lte-sidebar-menu-active-bg: #{$primary};
+  --lte-sidebar-menu-active-color: #{$white};
+
   // Dark Sidebar Native Variables
   --lte-sidebar-dark-bg: #343a40;
   --lte-sidebar-dark-hover-bg: rgba(255, 255, 255, .1);
@@ -93,7 +100,7 @@ $lte-font-size-xl: ($font-size-base * 2) !default;
 
 // Sidebar
 // --------------------------------------------------------
-$lte-sidebar-width:               250px !default;
+$lte-sidebar-width:               var(--lte-sidebar-width);
 $lte-sidebar-padding-x:           .5rem !default;
 $lte-sidebar-padding-y:           .5rem !default;
 $lte-sidebar-custom-height:       4rem !default;
@@ -103,10 +110,11 @@ $lte-sidebar-custom-padding-x:    .85rem !default;
 $lte-sidebar-custom-padding-y:    .5rem !default;
 $lte-sidebar-transition:          min-width $lte-transition-speed $lte-transition-fn,
   max-width $lte-transition-speed $lte-transition-fn,
-  margin-top $lte-transition-speed $lte-transition-fn,
   margin-left $lte-transition-speed $lte-transition-fn,
-  margin-right $lte-transition-speed $lte-transition-fn,
+  margin-right $lte-transition-speed $lte-transition-fn;
-  transform $lte-transition-speed $lte-transition-fn;
+
+// margin-top $lte-transition-speed $lte-transition-fn,
+// transform $lte-transition-speed $lte-transition-fn;
 
 // SIDEBAR SKINS
 // --------------------------------------------------------

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

@@ -39,7 +39,7 @@ $grays-alt: (
 ) !default;
 // fusv-enable
 
-$blue-alt:    #375a7f !default;
+$blue-alt:    #1f6feb !default;
 $indigo-alt:  #673ab7 !default;  //~~
 $purple-alt:  #654ea3 !default;  // Panatone CotY 2018
 $pink-alt:    #e83e8c !default;

src/scss/dark/_cards.scss

@@ -8,12 +8,8 @@
 }
 
 .card {
-  background-color: $gray-900-alt;
-  color: $white-alt;
-
   .card {
     background-color: tint-colors($gray-900-alt, 5%);
-    color: $white-alt;
   }
   .nav.flex-column > li {
     border-bottom-color: $gray-600-alt;

src/scss/dark/_table.scss

@@ -1,28 +0,0 @@
-.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/_variables-alt.scss

@@ -2,6 +2,10 @@
 // --------------------------------------------------------
 
 :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};
 

src/scss/dark/parts/_components.scss

@@ -3,4 +3,3 @@
 //
 
 @import "../cards";
-@import "../table";

src/scss/dark/parts/_core.scss

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