dark mode improvements

pages/_includes/layout/sidebar.html

@@ -19,7 +19,7 @@
 			</div>
 		</div>
 
-		<div class="mt-auto hide-sidebar-folded">
+		<div class="mt-auto hide-sidebar-folded pt-3">
 			{% include ui/button.html text="Logout" color="primary" icon="log-out" block=true %}
 		</div>
 	</div>

pages/tmp-dark.html

@@ -0,0 +1,34 @@
+---
+tmp: true
+page-title: Dark
+---
+
+<div class="row row-md">
+	{% for i in (0..1) %}
+		<div class="col py-4 {% if i > 0 %} theme-dark{% endif %}">
+			<div class="card m-0">
+				<header class="card-header">
+					<h3 class="card-title">Card title</h3>
+				</header>
+				<div class="card-body">
+					<h3>H3 header</h3>
+					<h4>H4 header</h4>
+					<h5>H5 header</h5>
+					<h6>H6 header</h6>
+					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus adipisci consectetur cupiditate, doloribus error ex expedita fuga incidunt laboriosam pariatur perferendis possimus praesentium quisquam reiciendis tempora ut! Cumque, fuga!</p>
+					{% include ui/progress.html value=60 size="sm" class="mb-3" %}
+					<div>
+						{% include ui/button.html color="primary" %}
+						{% include ui/button.html color="secondary" %}
+						{% include ui/button.html color="danger" %}
+						{% include ui/button.html color="success" %}
+						{% include ui/button.html color="warning" %}
+					</div>
+				</div>
+				<footer class="card-footer">
+					Card footer
+				</footer>
+			</div>
+		</div>
+	{% endfor %}
+</div>

scss/_dark.scss

@@ -17,23 +17,13 @@ $dark-border-color: rgba($border-color, .01);
   .sidebar,
   .topbar {
     color: inherit;
-    background: rgba($white, .02);
+    background: $dark;
-    border-color: $dark-border-color;
   }
 
-  .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;
+$border-color: rgba(mix($body-color, #fff, 75%), .24) !default;
-$hover-bg: $gray-200 !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,
+  4: $spacer * 1.5,
-  5: $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 {