From 18f2d13650744a2ae683e494eefc0854da078552 Mon Sep 17 00:00:00 2001
From: Daniel <50356015+danny007in@users.noreply.github.com>
Date: Sun, 23 May 2021 15:33:16 +0530
Subject: [PATCH] improve dark mode variables

---
 src/scss/_brand-container.scss              |  3 +--
 src/scss/_main-sidebar.scss                 | 13 ++++++---
 src/scss/_mixins.scss                       |  1 -
 src/scss/_sidebar-close.scss                | 30 ++-------------------
 src/scss/_variables.scss                    | 16 ++++++++---
 src/scss/bootstrap-dark/_variables-alt.scss |  2 +-
 src/scss/dark/_cards.scss                   |  4 ---
 src/scss/dark/_table.scss                   | 28 -------------------
 src/scss/dark/_variables-alt.scss           |  4 +++
 src/scss/dark/parts/_components.scss        |  1 -
 src/scss/dark/parts/_core.scss              |  1 -
 11 files changed, 30 insertions(+), 73 deletions(-)
 delete mode 100644 src/scss/dark/_table.scss

diff --git a/src/scss/_brand-container.scss b/src/scss/_brand-container.scss
index 38e2caa0c..457771279 100644
--- a/src/scss/_brand-container.scss
+++ b/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 {
diff --git a/src/scss/_main-sidebar.scss b/src/scss/_main-sidebar.scss
index 607ddf6c3..3e39a1708 100644
--- a/src/scss/_main-sidebar.scss
+++ b/src/scss/_main-sidebar.scss
@@ -36,9 +36,9 @@
   );
 }
 
-.sidebar-color-primary {
-  @include sidebar-color($primary);
-}
+// .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);
+    }
+  }
 }
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 5ef7385f8..1d4a6881e 100644
--- a/src/scss/_mixins.scss
+++ b/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";
diff --git a/src/scss/_sidebar-close.scss b/src/scss/_sidebar-close.scss
index b15a10fde..3f19703c1 100644
--- a/src/scss/_sidebar-close.scss
+++ b/src/scss/_sidebar-close.scss
@@ -1,32 +1,6 @@
 .sidebar-close:not(.sidebar-horizontal) {
   .main-sidebar {
-    margin-left: -#{$lte-sidebar-width};
-  }
-  // @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;
-    //   }
-    // }
+    // stylelint-disable-next-line
+    margin-left: calc(#{$lte-sidebar-width} * -1);
   }
 }
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index f5913f1bd..36c23a919 100644
--- a/src/scss/_variables.scss
+++ b/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,
-  transform $lte-transition-speed $lte-transition-fn;
+  margin-right $lte-transition-speed $lte-transition-fn;
+
+// margin-top $lte-transition-speed $lte-transition-fn,
+// transform $lte-transition-speed $lte-transition-fn;
 
 // SIDEBAR SKINS
 // --------------------------------------------------------
diff --git a/src/scss/bootstrap-dark/_variables-alt.scss b/src/scss/bootstrap-dark/_variables-alt.scss
index 95ace1278..dc0419f51 100644
--- a/src/scss/bootstrap-dark/_variables-alt.scss
+++ b/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;
diff --git a/src/scss/dark/_cards.scss b/src/scss/dark/_cards.scss
index 8ec329b9e..cba988628 100644
--- a/src/scss/dark/_cards.scss
+++ b/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;
diff --git a/src/scss/dark/_table.scss b/src/scss/dark/_table.scss
deleted file mode 100644
index abd7a3d6c..000000000
--- a/src/scss/dark/_table.scss
+++ /dev/null
@@ -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%);
-    }
-  }
-}
diff --git a/src/scss/dark/_variables-alt.scss b/src/scss/dark/_variables-alt.scss
index 9c29bd159..599d4dfb9 100644
--- a/src/scss/dark/_variables-alt.scss
+++ b/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};
 
diff --git a/src/scss/dark/parts/_components.scss b/src/scss/dark/parts/_components.scss
index ff91a700f..e4cdc8233 100644
--- a/src/scss/dark/parts/_components.scss
+++ b/src/scss/dark/parts/_components.scss
@@ -3,4 +3,3 @@
 //
 
 @import "../cards";
-@import "../table";
diff --git a/src/scss/dark/parts/_core.scss b/src/scss/dark/parts/_core.scss
index 20271f604..402a22259 100644
--- a/src/scss/dark/parts/_core.scss
+++ b/src/scss/dark/parts/_core.scss
@@ -1,4 +1,3 @@
 @import "../main-header";
-// @import "../main-sidebar";
 @import "../content-wrapper";
 @import "../main-footer";