From a2e8879f6523c78fbb7051fbc878205359aa006a Mon Sep 17 00:00:00 2001
From: Daniel <50356015+danny007in@users.noreply.github.com>
Date: Sat, 4 Feb 2023 20:50:12 +0530
Subject: [PATCH] BREAKING CHANGES IMPROVED CSS AND HTML USES

---
 src/index.html                           |   2 +-
 src/index2.html                          |  18 +-
 src/index3.html                          |   2 +-
 src/pages/UI/timeline.html               |   2 +-
 src/pages/examples/login.html            |   2 +-
 src/pages/examples/register.html         |   2 +-
 src/pages/forms/general.html             |   2 +-
 src/pages/layout/fixed-sidebar.html      |   2 +-
 src/pages/tables/simple.html             |   2 +-
 src/pages/widgets/cards.html             | 173 +++++++++++++-
 src/pages/widgets/info-box.html          |   2 +-
 src/pages/widgets/small-box.html         |   2 +-
 src/partials/dashboard/_sidenav.html     |   2 +-
 src/partials/dashboard/_topbar.html      |   2 +-
 src/scss/_brand-container.scss           |   6 +-
 src/scss/_cards.scss                     | 291 ++++-------------------
 src/scss/_content-wrapper.scss           |   4 +-
 src/scss/_direct-chat.scss               |  24 +-
 src/scss/_dropdown.scss                  |   6 +-
 src/scss/_info-box.scss                  |   8 +-
 src/scss/_main-footer.scss               |   2 +-
 src/scss/_main-header.scss               |  19 +-
 src/scss/_main-sidebar.scss              | 237 ++++++++++++++----
 src/scss/_miscellaneous.scss             |  14 --
 src/scss/_mixins.scss                    |   6 -
 src/scss/_products.scss                  |   2 +-
 src/scss/_root.scss                      |  47 +---
 src/scss/_sidebar-horizontal.scss        |   8 +-
 src/scss/_users-list.scss                |   2 +-
 src/scss/_variables.scss                 |  10 +-
 src/scss/_wrapper.scss                   |   6 +-
 src/scss/mixins/_brand-variant.scss      |   9 -
 src/scss/mixins/_cards.scss              |  53 -----
 src/scss/mixins/_direct-chat.scss        |  17 --
 src/scss/mixins/_header-variant.scss     |  22 --
 src/scss/mixins/_nav-treeview-dark.scss  |  87 -------
 src/scss/mixins/_nav-treeview-light.scss |  89 -------
 src/scss/mixins/_scrollbar.scss          |   4 +-
 src/scss/mixins/_sidebar-color.scss      |   9 -
 src/scss/pages/_login_and_register.scss  |   3 +-
 40 files changed, 481 insertions(+), 719 deletions(-)
 delete mode 100644 src/scss/mixins/_brand-variant.scss
 delete mode 100644 src/scss/mixins/_cards.scss
 delete mode 100644 src/scss/mixins/_direct-chat.scss
 delete mode 100644 src/scss/mixins/_header-variant.scss
 delete mode 100644 src/scss/mixins/_nav-treeview-dark.scss
 delete mode 100644 src/scss/mixins/_nav-treeview-light.scss
 delete mode 100644 src/scss/mixins/_sidebar-color.scss
diff --git a/src/index.html b/src/index.html
index 3f83160fa..ce33332be 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,7 +9,7 @@
     })
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
   </head>
-  <body class="layout-fixed">
+  <body class="layout-fixed bg-body-tertiary">
     <div class="wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "."
diff --git a/src/index2.html b/src/index2.html
index 67730d36c..aaf446a02 100644
--- a/src/index2.html
+++ b/src/index2.html
@@ -8,7 +8,7 @@
       "title": "AdminLTE 4 | Dashboard 2"
     })
   </head>
-  <body class="layout-fixed">
+  <body class="layout-fixed bg-body-tertiary">
     <div class="wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "."
@@ -524,7 +524,7 @@
 
                 <!-- TABLE: LATEST ORDERS -->
                 <div class="card">
-                  <div class="card-header border-transparent">
+                  <div class="card-header">
                     <h3 class="card-title">Latest Orders</h3>
 
                     <div class="card-tools">
@@ -688,13 +688,13 @@
                       </div>
                       <!-- /.col -->
                       <div class="col-md-4">
-                        <ul class="chart-legend clearfix">
-                          <li><i class="fa-regular fa-circle text-danger"></i> Chrome</li>
-                          <li><i class="fa-regular fa-circle text-success"></i> IE</li>
-                          <li><i class="fa-regular fa-circle text-warning"></i> FireFox</li>
-                          <li><i class="fa-regular fa-circle text-info"></i> Safari</li>
-                          <li><i class="fa-regular fa-circle text-primary"></i> Opera</li>
-                          <li><i class="fa-regular fa-circle text-secondary"></i> Navigator</li>
+                        <ul class="row list-unstyled text-nowrap">
+                          <li class="col"><i class="fa-regular fa-circle text-danger"></i> Chrome</li>
+                          <li class="col"><i class="fa-regular fa-circle text-success"></i> IE</li>
+                          <li class="col"><i class="fa-regular fa-circle text-warning"></i> FireFox</li>
+                          <li class="col"><i class="fa-regular fa-circle text-info"></i> Safari</li>
+                          <li class="col"><i class="fa-regular fa-circle text-primary"></i> Opera</li>
+                          <li class="col"><i class="fa-regular fa-circle text-secondary"></i> Navigator</li>
                         </ul>
                       </div>
                       <!-- /.col -->
diff --git a/src/index3.html b/src/index3.html
index 1b473a0be..73ce2c516 100644
--- a/src/index3.html
+++ b/src/index3.html
@@ -9,7 +9,7 @@
     })
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
   </head>
-  <body class="layout-fixed">
+  <body class="layout-fixed bg-body-tertiary">
     <div class="wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "."
diff --git a/src/pages/UI/timeline.html b/src/pages/UI/timeline.html
index f4e2b3229..3adf5facb 100644
--- a/src/pages/UI/timeline.html
+++ b/src/pages/UI/timeline.html
@@ -8,7 +8,7 @@
       "title": "AdminLTE 4 | Timeline Elements"
     })
   </head>
-  <body class="layout-fixed">
+  <body class="layout-fixed bg-body-tertiary">
     <div class="wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "../.."
diff --git a/src/pages/examples/login.html b/src/pages/examples/login.html
index 7103f7a7f..3e7a84382 100644
--- a/src/pages/examples/login.html
+++ b/src/pages/examples/login.html
@@ -9,7 +9,7 @@
       "title": "AdminLTE 4 | Login Page"
     })
   </head>
-  <body class="login-page">
+  <body class="login-page bg-body-secondary">
     <div class="login-box">
       <div class="login-logo">
         <a href="../../index2.html"><b>Admin</b>LTE</a>
diff --git a/src/pages/examples/register.html b/src/pages/examples/register.html
index bd51a64cc..4c95803f7 100644
--- a/src/pages/examples/register.html
+++ b/src/pages/examples/register.html
@@ -9,7 +9,7 @@
       "title": "AdminLTE 4 | Register Page"
     })
   </head>
-  <body class="register-page">
+  <body class="register-page bg-body-secondary">
     <div class="register-box">
       <div class="register-logo">
         <a href="../../index2.html"><b>Admin</b>LTE</a>
diff --git a/src/pages/forms/general.html b/src/pages/forms/general.html
index f9bf6342d..42ea025c5 100644
--- a/src/pages/forms/general.html
+++ b/src/pages/forms/general.html
@@ -8,7 +8,7 @@
       "title": "AdminLTE 4 | General Form Elements"
     })
   </head>
-  <body class="layout-fixed">
+  <body class="layout-fixed bg-body-tertiary">
     <div class="wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "../.."
diff --git a/src/pages/layout/fixed-sidebar.html b/src/pages/layout/fixed-sidebar.html
index fffa69e13..a47000d37 100644
--- a/src/pages/layout/fixed-sidebar.html
+++ b/src/pages/layout/fixed-sidebar.html
@@ -8,7 +8,7 @@
       "title": "AdminLTE 4 | Fixed Sidebar"
     })
   </head>
-  <body class="layout-fixed">
+  <body class="layout-fixed bg-body-tertiary">
     <div class="wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "../.."
diff --git a/src/pages/tables/simple.html b/src/pages/tables/simple.html
index 2a9a38519..dcbaa1e27 100644
--- a/src/pages/tables/simple.html
+++ b/src/pages/tables/simple.html
@@ -8,7 +8,7 @@
       "title": "AdminLTE 4 | Simple Tables"
     })
   </head>
-  <body class="layout-fixed">
+  <body class="layout-fixed bg-body-tertiary">
     <div class="wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "../.."
diff --git a/src/pages/widgets/cards.html b/src/pages/widgets/cards.html
index 8b732513f..878cbb201 100644
--- a/src/pages/widgets/cards.html
+++ b/src/pages/widgets/cards.html
@@ -8,7 +8,7 @@
       "title": "AdminLTE 4 | Widgets - Cards"
     })
   </head>
-  <body class="layout-fixed">
+  <body class="layout-fixed bg-body-tertiary">
     <div class="wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "../.."
@@ -39,7 +39,8 @@
         <!-- Main content -->
         <div class="content">
           <div class="container-fluid">
-            <h4 class="mb-2 mt-4">Cards</h4>
+            <h4 class="mb-2">Cards</h4>
+
             <h5 class="mb-2">Abilities</h5>
             <div class="row">
               <div class="col-md-3">
@@ -123,6 +124,174 @@
               </div>
               <!-- /.col -->
             </div>
+
+            <h5 class="mb-2">Card Outlined</h5>
+            <div class="row">
+              <div class="col-md-3">
+                <div class="card card-outline card-primary collapsed-card">
+                  <div class="card-header">
+                    <h3 class="card-title">Expandable</h3>
+
+                    <div class="card-tools">
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
+                      </button>
+                    </div>
+                    <!-- /.card-tools -->
+                  </div>
+                  <!-- /.card-header -->
+                  <div class="card-body">
+                    The body of the card
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.card -->
+              </div>
+              <!-- /.col -->
+              <div class="col-md-3">
+                <div class="card card-outline card-success">
+                  <div class="card-header">
+                    <h3 class="card-title">Collapsable</h3>
+
+                    <div class="card-tools">
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-minus"></i>
+                      </button>
+                    </div>
+                    <!-- /.card-tools -->
+                  </div>
+                  <!-- /.card-header -->
+                  <div class="card-body">
+                    The body of the card
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.card -->
+              </div>
+              <!-- /.col -->
+              <div class="col-md-3">
+                <div class="card card-outline card-warning">
+                  <div class="card-header">
+                    <h3 class="card-title">Removable</h3>
+
+                    <div class="card-tools">
+                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fa-solid fa-times"></i>
+                      </button>
+                    </div>
+                    <!-- /.card-tools -->
+                  </div>
+                  <!-- /.card-header -->
+                  <div class="card-body">
+                    The body of the card
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.card -->
+              </div>
+              <!-- /.col -->
+              <div class="col-md-3">
+                <div class="card card-outline card-danger">
+                  <div class="card-header">
+                    <h3 class="card-title">Maximizable</h3>
+
+                    <div class="card-tools">
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fa-solid fa-expand"></i>
+                      </button>
+                    </div>
+                    <!-- /.card-tools -->
+                  </div>
+                  <!-- /.card-header -->
+                  <div class="card-body">
+                    The body of the card
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.card -->
+              </div>
+              <!-- /.col -->
+            </div>
+
+            <h5 class="mb-2">Card with <code>.text-bg-*</code> </h5>
+            <div class="row">
+              <div class="col-md-3">
+                <div class="card text-bg-primary collapsed-card">
+                  <div class="card-header">
+                    <h3 class="card-title">Expandable</h3>
+
+                    <div class="card-tools">
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
+                      </button>
+                    </div>
+                    <!-- /.card-tools -->
+                  </div>
+                  <!-- /.card-header -->
+                  <div class="card-body">
+                    The body of the card
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.card -->
+              </div>
+              <!-- /.col -->
+              <div class="col-md-3">
+                <div class="card text-bg-success">
+                  <div class="card-header">
+                    <h3 class="card-title">Collapsable</h3>
+
+                    <div class="card-tools">
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-minus"></i>
+                      </button>
+                    </div>
+                    <!-- /.card-tools -->
+                  </div>
+                  <!-- /.card-header -->
+                  <div class="card-body">
+                    The body of the card
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.card -->
+              </div>
+              <!-- /.col -->
+              <div class="col-md-3">
+                <div class="card text-bg-warning">
+                  <div class="card-header">
+                    <h3 class="card-title">Removable</h3>
+
+                    <div class="card-tools">
+                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fa-solid fa-times"></i>
+                      </button>
+                    </div>
+                    <!-- /.card-tools -->
+                  </div>
+                  <!-- /.card-header -->
+                  <div class="card-body">
+                    The body of the card
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.card -->
+              </div>
+              <!-- /.col -->
+              <div class="col-md-3">
+                <div class="card text-bg-danger">
+                  <div class="card-header">
+                    <h3 class="card-title">Maximizable</h3>
+
+                    <div class="card-tools">
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fa-solid fa-expand"></i>
+                      </button>
+                    </div>
+                    <!-- /.card-tools -->
+                  </div>
+                  <!-- /.card-header -->
+                  <div class="card-body">
+                    The body of the card
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.card -->
+              </div>
+              <!-- /.col -->
+            </div>
             <!-- /.row -->
           </div><!-- /.container-fluid -->
         </div>
diff --git a/src/pages/widgets/info-box.html b/src/pages/widgets/info-box.html
index bb12cdd3e..f5fac5f98 100644
--- a/src/pages/widgets/info-box.html
+++ b/src/pages/widgets/info-box.html
@@ -9,7 +9,7 @@
     })
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
   </head>
-  <body class="layout-fixed">
+  <body class="layout-fixed bg-body-tertiary">
     <div class="wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "../.."
diff --git a/src/pages/widgets/small-box.html b/src/pages/widgets/small-box.html
index f1bad01e1..45af56ab4 100644
--- a/src/pages/widgets/small-box.html
+++ b/src/pages/widgets/small-box.html
@@ -9,7 +9,7 @@
     })
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
   </head>
-  <body class="layout-fixed">
+  <body class="layout-fixed bg-body-tertiary">
     <div class="wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "../.."
diff --git a/src/partials/dashboard/_sidenav.html b/src/partials/dashboard/_sidenav.html
index 6b099895c..01f1bf5f9 100644
--- a/src/partials/dashboard/_sidenav.html
+++ b/src/partials/dashboard/_sidenav.html
@@ -76,7 +76,7 @@
             <i class="nav-icon fa-solid fa-copy"></i>
             <p>
               Layout Options
-              <span class="badge text-bg-info float-end me-3">6</span>
+              <span class="badge text-bg-primary float-end me-3">6</span>
               <i class="end fa-solid fa-angle-right"></i>
             </p>
           </a>
diff --git a/src/partials/dashboard/_topbar.html b/src/partials/dashboard/_topbar.html
index 41e31912d..dff816531 100644
--- a/src/partials/dashboard/_topbar.html
+++ b/src/partials/dashboard/_topbar.html
@@ -1,5 +1,5 @@
 <!-- Navbar -->
-<nav class="main-header navbar navbar-expand navbar-light">
+<nav class="main-header navbar navbar-expand navbar-light bg-body">
   <div class="container-fluid">
     <!-- Start navbar links -->
     <ul class="navbar-nav">
diff --git a/src/scss/_brand-container.scss b/src/scss/_brand-container.scss
index 4c58c7853..a5ac2746b 100644
--- a/src/scss/_brand-container.scss
+++ b/src/scss/_brand-container.scss
@@ -4,7 +4,7 @@
 
 .brand-container {
   display: grid;
-  grid-template-areas: "brand-link pushmenu";
+  grid-template-areas: "#{lte-prefix}brand-link #{lte-prefix}pushmenu";
   justify-content: space-between;
   padding: $lte-brand-link-padding-y $lte-sidebar-padding-x;
   overflow: hidden;
@@ -13,7 +13,7 @@
   @include transition(width $lte-transition-speed $lte-transition-fn);
 
   .brand-link {
-    grid-area: brand-link;
+    grid-area: #{lte-prefix}brand-link;
 
     &:hover {
       text-decoration: none;
@@ -31,7 +31,7 @@
   }
 
   .pushmenu {
-    grid-area: pushmenu;
+    grid-area: #{lte-prefix}pushmenu;
   }
 
   .sidebar-bg-dark & {
diff --git a/src/scss/_cards.scss b/src/scss/_cards.scss
index fa2b1ce81..86ed8e337 100644
--- a/src/scss/_cards.scss
+++ b/src/scss/_cards.scss
@@ -3,29 +3,44 @@
 //
 
 // Color variants
-@each $name, $color in $theme-colors {
-  @include cards-variant($name, $color);
-}
-
-@each $name, $color in $colors {
-  @include cards-variant($name, $color);
-}
-
 .card {
   @include box-shadow($lte-card-shadow);
   margin-bottom: map-get($spacers, 3);
 
-  &.bg-dark {
-    .card-header {
-      border-color: $lte-card-dark-border-color;
-    }
+  &:not(.card-outline) {
+    > .card-header {
+      background-color: var(--#{$lte-prefix}card-variant-bg);
 
-    &,
-    .card-body {
-      color: $white;
+      &,
+      a {
+        color: var(--#{$lte-prefix}card-variant-color);
+      }
+
+      a {
+        &:hover {
+          border-top: 3px solid $nav-tabs-border-color;
+        }
+
+        &.active {
+          color: color-contrast($white);
+          border-top: 3px solid var(--#{$lte-prefix}card-variant-bg);
+        }
+      }
+
+      .btn-tool {
+        color: rgba(var(--#{$lte-prefix}card-variant-color-rgb), .8);
+
+        &:hover {
+          color: var(--#{$lte-prefix}card-variant-color);
+        }
+      }
     }
   }
 
+  &.card-outline {
+    border-top: 3px solid var(--#{$lte-prefix}card-variant-bg);
+  }
+
   &.maximized-card {
     position: fixed;
     top: 0;
@@ -197,6 +212,17 @@
 
 }
 
+@each $name, $color in $theme-colors {
+  @debug($name);
+  .card-#{$name},
+  .card.bg-#{$name},
+  .card.text-bg-#{$name} {
+    --#{$lte-prefix}card-variant-bg: #{$color};
+    --#{$lte-prefix}card-variant-color: #{color-contrast($color)};
+    --#{$lte-prefix}card-variant-color-rgb: #{to-rgb(color-contrast($color))};
+  }
+}
+
 // Maximized Card Body Scroll fix
 html.maximized-card {
   overflow: hidden;
@@ -206,7 +232,7 @@ html.maximized-card {
 .card-header,
 .card-body,
 .card-footer {
-  @include clearfix ();
+  @include clearfix();
 }
 
 // Box header
@@ -248,231 +274,16 @@ html.maximized-card {
   font-weight: $lte-card-title-font-weight;
 }
 
-.card-text {
-  clear: both;
-}
-
-
 // Box Tools Buttons
 .btn-tool {
-  padding: .25rem .5rem;
-  margin: -(($card-spacer-y * .5) * 2) 0;
+  --#{$prefix}btn-padding-x: .5rem;
+  --#{$prefix}btn-padding-y: .25rem;
+  --#{$prefix}btn-color: var(--#{$prefix}tertiary-color);
+  --#{$prefix}btn-bg: transparent;
+  --#{$prefix}btn-box-shadow: none;
+  --#{$prefix}btn-hover-color: --#{$prefix}secondary-color;
+  --#{$prefix}btn-active-border-color: transparent;
+
+  margin: -$card-spacer-y 0;
   font-size: $font-size-sm;
-  color: $gray-500;
-  background-color: transparent;
-
-  .btn-group.show &,
-  &:hover {
-    color: $gray-700;
-  }
-
-  .show &,
-  &:focus {
-    box-shadow: none !important;
-  }
-}
-
-.fs-7 {
-  .card-title {
-    font-size: $lte-card-title-font-size-sm;
-  }
-
-  .nav-link {
-    padding: $lte-card-nav-link-padding-sm-y $lte-card-nav-link-padding-sm-x;
-  }
-}
-
-// Box Body
-.card-body {
-  // @include border-radius-sides(0, 0, $border-radius, $border-radius);
-  // .no-header & {
-  //   @include border-top-radius($border-radius);
-  // }
-
-  // Tables within the box body
-  > .table {
-    margin-bottom: 0;
-
-    > thead > tr > th,
-    > thead > tr > td {
-      border-top-width: 0;
-    }
-  }
-
-  // Calendar within the box body
-  .fc {
-    margin-top: 5px;
-  }
-
-  .full-width-chart {
-    margin: -19px;
-  }
-
-  &.p-0 .full-width-chart {
-    margin: -9px;
-  }
-}
-
-.chart-legend {
-  @include list-unstyled ();
-  margin: 10px 0;
-
-  > li {
-    @media (max-width: map-get($grid-breakpoints, sm)) {
-      float: left;
-      margin-right: 10px;
-    }
-  }
-}
-
-// Comment Box
-.card-comments {
-  background-color: $gray-100;
-
-  .card-comment {
-    @include clearfix ();
-    padding: 8px 0;
-    border-bottom: 1px solid $gray-200;
-
-    &:last-of-type {
-      border-bottom: 0;
-    }
-
-    &:first-of-type {
-      padding-top: 0;
-    }
-
-    img {
-      float: left;
-      width: $lte-card-img-size;
-      height: $lte-card-img-size;
-    }
-  }
-
-  .comment-text {
-    margin-left: 40px;
-    color: tint-color($gray-700, 20%);
-  }
-
-  .username {
-    display: block;
-    font-weight: 600;
-    color: $gray-700;
-  }
-
-  .text-muted {
-    font-size: 12px;
-    font-weight: 400;
-  }
-}
-
-// Widgets
-//-----------
-
-// Widget: TODO LIST
-.todo-list {
-  padding: 0;
-  margin: 0;
-  overflow: auto;
-  list-style: none;
-
-  // Todo list element
-  > li {
-    padding: 10px;
-    margin-bottom: 2px;
-    color: $gray-700;
-    background-color: $gray-100;
-    border-left: 2px solid $gray-200;
-    @include border-radius(2px);
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-
-    > input[type="checkbox"] {
-      margin: 0 10px 0 5px;
-    }
-
-    .text {
-      display: inline-block;
-      margin-left: 5px;
-      font-weight: 600;
-    }
-
-    // Time labels
-    .badge {
-      margin-left: 10px;
-      font-size: .7rem;
-    }
-
-    // Tools and options box
-    .tools {
-      display: none;
-      float: right;
-      color: $danger;
-
-      // TODO: create new class for reduce files
-      // icons
-      > i,
-      > svg,
-      > img,
-      > object,
-      > iframe {
-        margin-right: 5px;
-        cursor: pointer;
-      }
-    }
-
-    &:hover .tools {
-      display: inline-block;
-    }
-
-    &.done {
-      color: shade-color($gray-500, 25%);
-
-      .text {
-        font-weight: 500;
-        text-decoration: line-through;
-      }
-
-      .badge {
-        background-color: $gray-500 !important;
-      }
-    }
-  }
-
-  // Color variants
-  @each $name, $color in $theme-colors {
-    .#{$name} {
-      border-left-color: $color;
-    }
-  }
-
-  @each $name, $color in $colors {
-    .#{$name} {
-      border-left-color: $color;
-    }
-  }
-
-  .handle {
-    display: inline-block;
-    margin: 0 5px;
-    cursor: move;
-  }
-}
-
-// END TODO WIDGET
-
-// Input in box
-.card-input {
-  max-width: 200px;
-}
-
-// Nav Tabs override
-.card-default {
-  .nav-item {
-    &:first-child .nav-link {
-      border-left: 0;
-    }
-  }
 }
diff --git a/src/scss/_content-wrapper.scss b/src/scss/_content-wrapper.scss
index 629594c75..33142fdc9 100644
--- a/src/scss/_content-wrapper.scss
+++ b/src/scss/_content-wrapper.scss
@@ -1,6 +1,4 @@
 .content-wrapper {
-  grid-area: content-wrapper;
+  grid-area: #{lte-prefix}content-wrapper;
   padding-bottom: 1rem;
-  color: var(--#{$lte-prefix}main-color);
-  background-color: var(--#{$lte-prefix}main-bg);
 }
diff --git a/src/scss/_direct-chat.scss b/src/scss/_direct-chat.scss
index b9b934011..ae5f90bcb 100644
--- a/src/scss/_direct-chat.scss
+++ b/src/scss/_direct-chat.scss
@@ -42,7 +42,7 @@
 }
 
 .direct-chat-msg {
-  @include clearfix ();
+  @include clearfix();
   margin-bottom: 10px;
 }
 
@@ -163,10 +163,10 @@
 
 //Contacts list -- for displaying contacts in direct chat contacts pane
 .contacts-list {
-  @include list-unstyled ();
+  @include list-unstyled();
 
   > li {
-    @include clearfix ();
+    @include clearfix();
     padding: 10px;
     margin: 0;
     border-bottom: 1px solid rgba($black, .2);
@@ -210,15 +210,21 @@
   color: var(--#{$prefix}secondary-bg);
 }
 
-// Color variants
-@each $name, $color in $theme-colors {
-  .direct-chat-#{$name} {
-    @include direct-chat-variant($color);
+.end > .direct-chat-text {
+  color: var(--#{$lte-prefix}direct-chat-color);
+  background-color: var(--#{$lte-prefix}direct-chat-bg);
+  border-color: var(--#{$lte-prefix}direct-chat-bg);
+
+  &::after,
+  &::before {
+    border-left-color: var(--#{$lte-prefix}direct-chat-bg);
   }
 }
 
-@each $name, $color in $colors {
+// Color variants
+@each $name, $color in $theme-colors {
   .direct-chat-#{$name} {
-    @include direct-chat-variant($color);
+    --#{$lte-prefix}direct-chat-color: #{color-contrast($color)};
+    --#{$lte-prefix}direct-chat-bg: #{$color};
   }
 }
diff --git a/src/scss/_dropdown.scss b/src/scss/_dropdown.scss
index 896f8acef..955038ace 100644
--- a/src/scss/_dropdown.scss
+++ b/src/scss/_dropdown.scss
@@ -58,7 +58,7 @@
   position: relative;
 
   > a::after {
-    @include caret-end ();
+    @include caret-end();
     float: right;
     margin-top: .5rem;
     margin-left: .5rem;
@@ -196,7 +196,7 @@
 
     // Menu Body
     > .user-body {
-      @include clearfix ();
+      @include clearfix();
       padding: 15px;
       border-top: 1px solid var(--#{$prefix}border-color);
       border-bottom: 1px solid var(--#{$prefix}border-color-translucent);
@@ -211,7 +211,7 @@
 
     // Menu Footer
     > .user-footer {
-      @include clearfix ();
+      @include clearfix();
       padding: 10px;
       background-color: var(--#{$prefix}light-bg);
 
diff --git a/src/scss/_info-box.scss b/src/scss/_info-box.scss
index 829767605..66f7caf39 100644
--- a/src/scss/_info-box.scss
+++ b/src/scss/_info-box.scss
@@ -64,12 +64,8 @@
 
   @each $name, $color in $theme-colors {
     .info-box {
-      .bg-#{$name} {
-        color: color-contrast($color);
-
-        .progress-bar {
-          background-color: color-contrast($color);
-        }
+      .progress-bar {
+        background-color: color-contrast($color);
       }
     }
   }
diff --git a/src/scss/_main-footer.scss b/src/scss/_main-footer.scss
index c4b09430f..45ae45ceb 100644
--- a/src/scss/_main-footer.scss
+++ b/src/scss/_main-footer.scss
@@ -3,7 +3,7 @@
 //
 
 .main-footer {
-  grid-area: main-footer;
+  grid-area: #{lte-prefix}main-footer;
   width: inherit;
   padding: $lte-main-footer-padding;
   color: $lte-main-footer-color;
diff --git a/src/scss/_main-header.scss b/src/scss/_main-header.scss
index ee8320098..d49f7c654 100644
--- a/src/scss/_main-header.scss
+++ b/src/scss/_main-header.scss
@@ -2,16 +2,9 @@
 // Core: Main Header
 //
 
-@include header-variant(
-  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 {
   z-index: $lte-zindex-main-header;
-  grid-area: main-header;
+  grid-area: #{lte-prefix}main-header;
   border-bottom: $lte-main-header-bottom-border;
 
   .nav-link {
@@ -29,13 +22,3 @@
   font-size: .6rem;
   font-weight: 400;
 }
-
-.layout-navbar-fixed {
-  .main-header {
-    // position: fixed;
-  }
-
-  .content-wrapper {
-    // margin-top: $lte-main-header-height;
-  }
-}
diff --git a/src/scss/_main-sidebar.scss b/src/scss/_main-sidebar.scss
index 38be37398..6696ff97a 100644
--- a/src/scss/_main-sidebar.scss
+++ b/src/scss/_main-sidebar.scss
@@ -2,55 +2,201 @@
 // Core: Main Sidebar
 //
 
-.sidebar-bg-dark {
-  @include nav-treeview-dark (
-    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 (
-    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)
-  );
-}
-
-// .sidebar-color-primary {
-//   @include sidebar-color($primary);
-// }
 
 .main-sidebar {
   @include transition($lte-sidebar-transition);
   z-index: $lte-zindex-sidebar;
-  grid-area: main-sidebar;
+  grid-area: #{lte-prefix}main-sidebar;
   min-width: var(--#{$lte-prefix}sidebar-width);
   max-width: var(--#{$lte-prefix}sidebar-width);
 
   .nav-sidebar > .nav-item {
     > .nav-link.active {
-      color: var(--#{$lte-prefix}sidebar-menu-active-color);
-      background-color: var(--#{$lte-prefix}sidebar-menu-active-bg);
+      color: var(--#{$lte-prefix}sidebar-menu-active-color) !important;
+      background-color: var(--#{$lte-prefix}sidebar-menu-active-bg) !important;
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .sidebar-color-#{$color} {
+    --#{$lte-prefix}sidebar-menu-active-bg: #{$value};
+    --#{$lte-prefix}sidebar-menu-active-color: #{color-contrast($value)};
+  }
+}
+
+.sidebar-bg-dark {
+  --#{$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};
+
+  // Sidebar background color
+  background-color: var(--#{$lte-prefix}sidebar-dark-bg);
+
+  // Sidebar Menu. First level links
+  .nav-sidebar > .nav-item {
+    // links
+    > .nav-link {
+      &:active {
+        color: var(--#{$lte-prefix}sidebar-dark-color);
+      }
+    }
+
+    // Hover and active states
+    &.menu-open > .nav-link,
+    &:hover > .nav-link,
+    > .nav-link:focus  {
+      color: var(--#{$lte-prefix}sidebar-dark-hover-color);
+      background-color: var(--#{$lte-prefix}sidebar-dark-hover-bg);
+    }
+
+    > .nav-link.active {
+      color: var(--#{$lte-prefix}sidebar-dark-hover-color);
+    }
+
+    // First Level Submenu
+    > .nav-treeview {
+      background-color: var(--#{$lte-prefix}sidebar-dark-submenu-bg);
+    }
+  }
+
+  // Section Heading
+  .nav-header {
+    color: var(--#{$lte-prefix}sidebar-dark-header-color);
+    background-color: inherit;
+  }
+
+  // All links within the sidebar menu
+  .sidebar {
+    a {
+      color: var(--#{$lte-prefix}sidebar-dark-color);
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // All submenus
+  .nav-treeview {
+    > .nav-item {
+      > .nav-link {
+        color: var(--#{$lte-prefix}sidebar-dark-submenu-color);
+
+        &:hover,
+        &:focus {
+          color: var(--#{$lte-prefix}sidebar-dark-submenu-hover-color);
+          background-color: var(--#{$lte-prefix}sidebar-dark-submenu-hover-bg);
+        }
+      }
+
+      > .nav-link.active {
+        &,
+        &:hover,
+        &:focus {
+          color: var(--#{$lte-prefix}sidebar-dark-submenu-active-color);
+          background-color: var(--#{$lte-prefix}sidebar-dark-submenu-active-bg);
+        }
+      }
+    }
+  }
+}
+
+.sidebar-bg-light {
+  --#{$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};
+
+  // Sidebar background color
+  background-color: var(--#{$lte-prefix}sidebar-light-bg);
+
+  // Sidebar Menu. First level links
+  .nav-sidebar > .nav-item {
+    // links
+    > .nav-link {
+      &:active,
+      &:focus {
+        color: var(--#{$lte-prefix}sidebar-light-color);
+      }
+    }
+
+    // Hover and active states
+    &.menu-open > .nav-link,
+    &:hover > .nav-link {
+      color: var(--#{$lte-prefix}sidebar-light-hover-color);
+      background-color: var(--#{$lte-prefix}sidebar-light-hover-bg);
+    }
+
+    > .nav-link.active {
+      color: var(--#{$lte-prefix}sidebar-light-active-color);
+    }
+
+    // First Level Submenu
+    > .nav-treeview {
+      background-color: var(--#{$lte-prefix}sidebar-light-submenu-bg);
+    }
+  }
+
+  // Section Heading
+  .nav-header {
+    color: var(--#{$lte-prefix}sidebar-light-header-color);
+    background-color: inherit;
+  }
+
+  // All links within the sidebar menu
+  .sidebar {
+    a {
+      color: var(--#{$lte-prefix}sidebar-light-color);
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // All submenus
+  .nav-treeview {
+    > .nav-item {
+      > .nav-link {
+        color: var(--#{$lte-prefix}sidebar-light-submenu-color);
+
+        &:hover,
+        &:focus {
+          color: var(--#{$lte-prefix}sidebar-light-submenu-hover-color);
+          background-color: var(--#{$lte-prefix}sidebar-light-submenu-hover-bg);
+        }
+      }
+
+      > .nav-link.active {
+        &,
+        &:hover {
+          color: var(--#{$lte-prefix}sidebar-light-submenu-active-color);
+          background-color: var(--#{$lte-prefix}sidebar-light-submenu-active-bg);
+        }
+      }
+
+      > .nav-link:hover {
+        background-color: var(--#{$lte-prefix}sidebar-light-submenu-hover-bg);
+      }
     }
   }
 }
@@ -61,3 +207,14 @@
     animation: none !important;
   }
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .sidebar-bg-dark {
+      --#{$lte-prefix}sidebar-dark-bg: #{$lte-sidebar-dark-bg-dark};
+    }
+    .sidebar-bg-light {
+      --#{$lte-prefix}sidebar-light-bg: #{$lte-sidebar-light-bg-dark};
+    }
+  }
+}
diff --git a/src/scss/_miscellaneous.scss b/src/scss/_miscellaneous.scss
index 0bc0fd033..4e7c69023 100644
--- a/src/scss/_miscellaneous.scss
+++ b/src/scss/_miscellaneous.scss
@@ -461,17 +461,3 @@ blockquote {
   border-top: none;
   border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
 }
-
-
-// Badge BTN Style
-.badge-btn {
-  padding: $lte-button-padding-y-xs * 2 $lte-button-padding-x-xs * 2;
-  font-size: $lte-button-font-size-xs;
-  font-weight: 400;
-  @include border-radius($lte-button-border-radius-xs);
-}
-
-.badge-btn.badge-pill {
-  padding: .375rem .6rem;
-}
-
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 6b767b40c..44f6c188a 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -4,9 +4,3 @@
 
 @import "mixins/animations";
 @import "mixins/scrollbar";
-@import "mixins/brand-variant";
-@import "mixins/header-variant";
-@import "mixins/nav-treeview-dark";
-@import "mixins/nav-treeview-light";
-@import "mixins/cards";
-@import "mixins/direct-chat";
diff --git a/src/scss/_products.scss b/src/scss/_products.scss
index 6345650ae..f8a5c2a92 100644
--- a/src/scss/_products.scss
+++ b/src/scss/_products.scss
@@ -8,7 +8,7 @@
   list-style: none;
 
   > .item {
-    @include clearfix ();
+    @include clearfix();
 
     @if $enable-rounded {
       @include border-radius($border-radius);
diff --git a/src/scss/_root.scss b/src/scss/_root.scss
index 6c292b649..5cdcb3f8e 100644
--- a/src/scss/_root.scss
+++ b/src/scss/_root.scss
@@ -1,48 +1,11 @@
-:root {
+:root,
+[data-bs-theme="light"] {
   // 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 {
@@ -51,11 +14,5 @@
     // Body Color
     --#{$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: #{$lte-sidebar-dark-bg-dark};
-
-    // // Light Sidebar Native Variables
-    --#{$lte-prefix}sidebar-light-bg: #{$lte-sidebar-light-bg-dark};
   }
 }
diff --git a/src/scss/_sidebar-horizontal.scss b/src/scss/_sidebar-horizontal.scss
index a316d38d8..5af455e7b 100644
--- a/src/scss/_sidebar-horizontal.scss
+++ b/src/scss/_sidebar-horizontal.scss
@@ -2,10 +2,10 @@
   .sidebar-horizontal {
     .wrapper {
       grid-template-areas:
-        "main-header"
-        "main-sidebar"
-        "content-wrapper"
-        "main-footer";
+        "#{lte-prefix}main-header"
+        "#{lte-prefix}main-sidebar"
+        "#{lte-prefix}content-wrapper"
+        "#{lte-prefix}main-footer";
       grid-template-rows: max-content max-content auto max-content;
       grid-template-columns: auto;
     }
diff --git a/src/scss/_users-list.scss b/src/scss/_users-list.scss
index 665c3518e..eb0f91e47 100644
--- a/src/scss/_users-list.scss
+++ b/src/scss/_users-list.scss
@@ -3,7 +3,7 @@
 //
 
 .users-list {
-  @include list-unstyled ();
+  @include list-unstyled();
 
   > li {
     float: left;
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 90ff107e8..0fc1d3bdc 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -33,12 +33,8 @@ $lte-sidebar-transition:          min-width $lte-transition-speed $lte-transitio
 // 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:                     #343a40 !default;
+$lte-sidebar-dark-bg:                     $gray-800 !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;
@@ -170,10 +166,6 @@ $lte-main-color:                  $black !default;
 
 // BUTTON
 // --------------------------------------------------------
-$lte-button-default-background-color: $gray-100 !default;
-$lte-button-default-color: #444 !default;
-$lte-button-default-border-color: #ddd !default;
-
 $lte-button-padding-y-xs: .125rem !default;
 $lte-button-padding-x-xs: .25rem !default;
 $lte-button-line-height-xs: $line-height-sm !default;
diff --git a/src/scss/_wrapper.scss b/src/scss/_wrapper.scss
index da5fed0d7..cd6498df5 100644
--- a/src/scss/_wrapper.scss
+++ b/src/scss/_wrapper.scss
@@ -6,9 +6,9 @@
   position: relative;
   display: grid;
   grid-template-areas:
-    "main-sidebar main-header"
-    "main-sidebar content-wrapper"
-    "main-sidebar main-footer";
+    "#{lte-prefix}main-sidebar #{lte-prefix}main-header"
+    "#{lte-prefix}main-sidebar #{lte-prefix}content-wrapper"
+    "#{lte-prefix}main-sidebar #{lte-prefix}main-footer";
   grid-template-rows: min-content 1fr min-content;
   grid-template-columns: auto 1fr;
   grid-gap: 0;
diff --git a/src/scss/mixins/_brand-variant.scss b/src/scss/mixins/_brand-variant.scss
deleted file mode 100644
index 0d3a4ca0e..000000000
--- a/src/scss/mixins/_brand-variant.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@mixin brand-variant(
-  $brand-bg,
-  $brand-color
-) {
-  .brand-container {
-    color: $brand-color;
-    background-color: $brand-bg;
-  }
-}
diff --git a/src/scss/mixins/_cards.scss b/src/scss/mixins/_cards.scss
deleted file mode 100644
index 448d08ed2..000000000
--- a/src/scss/mixins/_cards.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-//
-// Mixins: Cards Variant
-//
-
-@mixin cards-variant($name, $color) {
-  .card-#{$name} {
-    &:not(.card-outline) {
-      > .card-header {
-        background-color: $color;
-
-        &,
-        a {
-          color: color-contrast($color);
-        }
-
-        a.active {
-          color: color-contrast($white);
-        }
-      }
-    }
-
-    &.card-outline {
-      border-top: 3px solid $color;
-    }
-
-    &.card-outline-tabs {
-      > .card-header {
-        a {
-          &:hover {
-            border-top: 3px solid $nav-tabs-border-color;
-          }
-
-          &.active {
-            border-top: 3px solid $color;
-          }
-        }
-      }
-    }
-  }
-
-  .bg-#{$name},
-  .card-#{$name}:not(.card-outline) {
-    > .card-header {
-      .btn-tool {
-        color: rgba(color-contrast($color), .8);
-
-        &:hover {
-          color: color-contrast($color);
-        }
-      }
-    }
-  }
-}
diff --git a/src/scss/mixins/_direct-chat.scss b/src/scss/mixins/_direct-chat.scss
deleted file mode 100644
index d102b23f6..000000000
--- a/src/scss/mixins/_direct-chat.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-//
-// Mixins: Direct Chat
-//
-
-// Direct Chat Variant
-@mixin direct-chat-variant($bg-color, $color: $white) {
-  .end > .direct-chat-text {
-    color: color-contrast($bg-color);
-    background-color: $bg-color;
-    border-color: $bg-color;
-
-    &::after,
-    &::before {
-      border-left-color: $bg-color;
-    }
-  }
-}
diff --git a/src/scss/mixins/_header-variant.scss b/src/scss/mixins/_header-variant.scss
deleted file mode 100644
index 99a28bae1..000000000
--- a/src/scss/mixins/_header-variant.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-//
-// Mixins: Sidebar Variant
-//
-
-@mixin header-variant(
-  $lte-header-bg,
-  $lte-header-color,
-  $lte-header-mobile-bg,
-  $lte-header-mobile-color
-) {
-  .main-header {
-    color: $lte-header-color;
-    background-color: $lte-header-bg;
-  }
-
-  @include media-breakpoint-down(lg) {
-    .main-header {
-      color: $lte-header-mobile-color;
-      background-color: $lte-header-mobile-bg;
-    }
-  }
-}
diff --git a/src/scss/mixins/_nav-treeview-dark.scss b/src/scss/mixins/_nav-treeview-dark.scss
deleted file mode 100644
index e14a44cf0..000000000
--- a/src/scss/mixins/_nav-treeview-dark.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@mixin nav-treeview-dark(
-  $lte-sidebar-bg,
-  $lte-sidebar-hover-bg,
-  $lte-sidebar-color,
-  $lte-sidebar-hover-color,
-  $lte-sidebar-active-color,
-  $lte-sidebar-submenu-bg,
-  $lte-sidebar-submenu-color,
-  $lte-sidebar-submenu-hover-color,
-  $lte-sidebar-submenu-hover-bg,
-  $lte-sidebar-submenu-active-color,
-  $lte-sidebar-submenu-active-bg,
-  $lte-sidebar-header-color
-) {
-  // Sidebar background color
-  background-color: $lte-sidebar-bg;
-
-  // Sidebar Menu. First level links
-  .nav-sidebar > .nav-item {
-    // links
-    > .nav-link {
-      // border-left: 3px solid transparent;
-      &:active {
-        color: $lte-sidebar-color;
-      }
-    }
-
-    // Hover and active states
-    &.menu-open > .nav-link,
-    &:hover > .nav-link,
-    > .nav-link:focus  {
-      color: $lte-sidebar-hover-color;
-      background-color: $lte-sidebar-hover-bg;
-    }
-
-    > .nav-link.active {
-      color: $lte-sidebar-hover-color;
-    }
-
-    // First Level Submenu
-    > .nav-treeview {
-      background-color: $lte-sidebar-submenu-bg;
-    }
-  }
-
-  // Section Heading
-  .nav-header {
-    color: $lte-sidebar-header-color;
-    background-color: inherit; //darken($lte-sidebar-bg, 3%);
-  }
-
-  // All links within the sidebar menu
-  .sidebar {
-    a {
-      color: $lte-sidebar-color;
-
-      &:hover,
-      &:focus {
-        text-decoration: none;
-      }
-    }
-  }
-
-  // All submenus
-  .nav-treeview {
-    > .nav-item {
-      > .nav-link {
-        color: $lte-sidebar-submenu-color;
-
-        &:hover,
-        &:focus {
-          color: $lte-sidebar-submenu-hover-color;
-          background-color: $lte-sidebar-submenu-hover-bg;
-        }
-      }
-
-      > .nav-link.active {
-        &,
-        &:hover,
-        &:focus {
-          color: $lte-sidebar-submenu-active-color;
-          background-color: $lte-sidebar-submenu-active-bg;
-        }
-      }
-    }
-  }
-}
diff --git a/src/scss/mixins/_nav-treeview-light.scss b/src/scss/mixins/_nav-treeview-light.scss
deleted file mode 100644
index c30a98dc0..000000000
--- a/src/scss/mixins/_nav-treeview-light.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-@mixin nav-treeview-light(
-  $lte-sidebar-bg,
-  $lte-sidebar-hover-bg,
-  $lte-sidebar-color,
-  $lte-sidebar-hover-color,
-  $lte-sidebar-active-color,
-  $lte-sidebar-submenu-bg,
-  $lte-sidebar-submenu-color,
-  $lte-sidebar-submenu-hover-color,
-  $lte-sidebar-submenu-hover-bg,
-  $lte-sidebar-submenu-active-color,
-  $lte-sidebar-submenu-active-bg,
-  $lte-sidebar-header-color
-) {
-  // Sidebar background color
-  background-color: $lte-sidebar-bg;
-
-  // Sidebar Menu. First level links
-  .nav-sidebar > .nav-item {
-    // links
-    > .nav-link {
-      // border-left: 3px solid transparent;
-      &:active,
-      &:focus {
-        color: $lte-sidebar-color;
-      }
-    }
-
-    // Hover and active states
-    &.menu-open > .nav-link,
-    &:hover > .nav-link {
-      color: $lte-sidebar-hover-color;
-      background-color: $lte-sidebar-hover-bg;
-    }
-
-    > .nav-link.active {
-      color: $lte-sidebar-active-color;
-    }
-
-    // First Level Submenu
-    > .nav-treeview {
-      background-color: $lte-sidebar-submenu-bg;
-    }
-  }
-
-  // Section Heading
-  .nav-header {
-    color: $lte-sidebar-header-color;
-    background-color: inherit;
-  }
-
-  // All links within the sidebar menu
-  .sidebar {
-    a {
-      color: $lte-sidebar-color;
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-  }
-
-  // All submenus
-  .nav-treeview {
-    > .nav-item {
-      > .nav-link {
-        color: $lte-sidebar-submenu-color;
-
-        &:hover,
-        &:focus {
-          color: $lte-sidebar-submenu-hover-color;
-          background-color: $lte-sidebar-submenu-hover-bg;
-        }
-      }
-
-      > .nav-link.active {
-        &,
-        &:hover {
-          color: $lte-sidebar-submenu-active-color;
-          background-color: $lte-sidebar-submenu-active-bg;
-        }
-      }
-
-      > .nav-link:hover {
-        background-color: $lte-sidebar-submenu-hover-bg;
-      }
-    }
-  }
-}
diff --git a/src/scss/mixins/_scrollbar.scss b/src/scss/mixins/_scrollbar.scss
index ba502f91e..65c3b53d6 100644
--- a/src/scss/mixins/_scrollbar.scss
+++ b/src/scss/mixins/_scrollbar.scss
@@ -3,10 +3,10 @@
 //
 
 @mixin scrollbar-color-gray() {
-  scrollbar-color: #a9a9a9 transparent;
+  scrollbar-color: var(--#{$prefix}secondary-bg) transparent;
 
   &::-webkit-scrollbar-thumb {
-    background-color: #a9a9a9;
+    background-color: var(--#{$prefix}secondary-bg);
   }
 
   &::-webkit-scrollbar-track {
diff --git a/src/scss/mixins/_sidebar-color.scss b/src/scss/mixins/_sidebar-color.scss
deleted file mode 100644
index 1b6f4ef07..000000000
--- a/src/scss/mixins/_sidebar-color.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// Sidebar Color
-@mixin sidebar-color($color) {
-  .nav-sidebar > .nav-item {
-    > .nav-link.active {
-      color: color-contrast($color);
-      background-color: $color;
-    }
-  }
-}
diff --git a/src/scss/pages/_login_and_register.scss b/src/scss/pages/_login_and_register.scss
index ff59d6909..eee080386 100644
--- a/src/scss/pages/_login_and_register.scss
+++ b/src/scss/pages/_login_and_register.scss
@@ -20,8 +20,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
-  background-color: var(--#{$prefix}secondary-bg);
+  min-height: 100vh;
 }
 
 .login-box,
