dark mode improvements

scss/_dark.scss

@@ -17,23 +17,13 @@ $dark-border-color: rgba($border-color, .01);
   .sidebar,
   .topbar {
     color: inherit;
-    background: rgba($white, .02);
-    border-color: $dark-border-color;
+    background: $dark;
   }
 
-  .progress,
   .form-control-light {
     background: $dark-border-color;
   }
 
-  .example,
-  .card-footer,
-  .card-header,
-  .table th, .markdown table th, .table td, .markdown table td,
-  .dropdown-menu {
-    border-color: $dark-border-color;
-  }
-
   .text-body {
     color: #afbdd1 !important;
   }
@@ -52,13 +42,13 @@ $dark-border-color: rgba($border-color, .01);
 }
 
 @media not print {
-  body.theme-dark {
+  .theme-dark {
     @include dark-mode;
   }
 }
 
 @media (prefers-color-scheme: dark) {
-  body.auto-theme-dark {
+  .auto-theme-dark {
     @include dark-mode;
   }
 }

scss/_variables.scss

@@ -17,9 +17,11 @@ $light: #f5f7fb !default;
 $dark: #354052 !default;
 
 $light-black: rgba($dark, .4) !default;
+$light-mix: rgba(mix($light, $dark, 64%), .24) !default;
 $light-white: rgba($light, .4) !default;
-$min-black: rgba($dark, .02) !default;
-$min-white: rgba($light, .02) !default;
+
+$min-black: rgba($dark, .024) !default;
+$min-white: rgba($light, .024) !default;
 
 $gray-100: $light !default;
 $gray-200: mix($light, $dark, 98%) !default;
@@ -50,8 +52,10 @@ $body-bg: $light !default;
 $body-color: $dark !default;
 
 $text-muted: mix($body-color, #fff, 64%) !default;
-$border-color: rgba($body-color, .16) !default;
-$hover-bg: $gray-200 !default;
+$border-color: rgba(mix($body-color, #fff, 75%), .24) !default;
+
+
+$hover-bg: $light-white !default;
 $active-bg: rgba($blue, .06) !default;
 
 $primary: $blue !default;
@@ -150,8 +154,8 @@ $spacers: (
   1: $spacer * .25,
   2: $spacer * .5,
   3: $spacer,
-  4: $spacer * 1.25,
-  5: $spacer * 1.5,
+  4: $spacer * 1.5,
+  5: $spacer * 2,
   6: $spacer * 3,
   7: $spacer * 6,
   8: $spacer * 9,
@@ -308,7 +312,7 @@ $toast-header-color: $text-muted !default;
 $yiq-contrasted-threshold: 200 !default;
 
 //progress
-$progress-bg: $gray-200 !default;
+$progress-bg: $light-mix !default;
 $progress-height: .75rem !default;
 
 //ribbons

scss/layout/_layout.scss

@@ -292,7 +292,7 @@ Sidebar
 
   line-height: $navbar-height;
   width: $sidenav-width;
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
 }

scss/ui/_buttons.scss

@@ -1,6 +1,13 @@
 .btn-secondary {
   @include button-variant($white, $border-color, $dark);
   background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba($dark, .04) 100%);
+  box-shadow: none !important;
+
+  .bg-dark &,
+  .theme-dark & {
+    @include button-variant($min-white, $border-color, $light, rgba(0, 0, 0, 0), $border-color, $light);
+    background-image: none;
+  }
 }
 
 .btn-outlined-secondary {