dark mode fixes

scss/_dark.scss

 // stylelint-disable declaration-no-important
 
-$dark-text: $light;
-
 @include dark-mode {
   & {
-    color: $dark-text;
-    background: $dark-darken;
+    color: $dark-mode-text;
+    background-color: $dark-mode-darken;
   }
 
   .card,
@@ -13,7 +11,7 @@ $dark-text: $light;
   .footer,
   .modal-content,
   .modal-header {
-    background: $dark;
+    background-color: $dark;
     color: inherit;
   }
 
@@ -23,7 +21,7 @@ $dark-text: $light;
 
   .btn-secondary,
   .form-file-button {
-    @include button-variant($dark-lighten, $border-color, $dark-text, rgba($dark, 0), $border-color, $dark-text);
+    @include button-variant($dark-mode-lighten, $border-color, $dark-mode-text, rgba($dark, 0), $border-color, $dark-mode-text);
     background-image: none;
   }
 
@@ -35,28 +33,28 @@ $dark-text: $light;
   .flatpickr-input.flatpickr-input,
   .form-selectgroup-check,
   .form-imagecheck-figure:before {
-    background-color: $dark-darken;
-    color: $dark-text;
+    background-color: $dark-mode-darken;
+    color: $dark-mode-text;
   }
 
   .form-control-plaintext {
-    color: $dark-text;
+    color: $dark-mode-text;
   }
 
   .input-group-flat .input-group-text {
-    background-color: $dark-darken;
+    background-color: $dark-mode-darken;
   }
 
   .navbar {
-    box-shadow: 0 0 0 1px $dark-darken;
+    box-shadow: 0 0 0 1px $dark-mode-darken;
   }
 
   .highlight {
-    background-color: $dark-darken;
+    background-color: $dark-mode-darken;
   }
 
   .avatar {
-    background-color: $dark-lighten;
+    background-color: $dark-mode-lighten;
   }
 
   .avatar-list-stacked .avatar {
@@ -70,7 +68,7 @@ $dark-text: $light;
   }
 
   .apexcharts-text {
-    fill: $dark-text;
+    fill: $dark-mode-text;
   }
 
   .apexcharts-legend-text {

scss/_variables.scss

@@ -17,9 +17,6 @@ $theme-color-interval: 10% !default;
 $light: #f5f7fb !default;
 $dark: #354052 !default;
 
-$dark-darken: darken($dark, 3%) !default;
-$dark-lighten: lighten($dark, 3%) !default;
-
 $light-black: rgba($dark, .24) !default;
 $light-mix: rgba(mix($light, $dark, 64%), .24) !default;
 $light-white: rgba($light, .24) !default;
@@ -107,6 +104,15 @@ $colors: (
   "dark": $dark
 ) !default;
 
+
+/**
+Dark mode
+ */
+
+$dark-mode-darken: darken($dark, 3%) !default;
+$dark-mode-lighten: lighten($dark, 3%) !default;
+$dark-mode-text: $light;
+
 $avatar-sizes: (
   "sm": 1.5rem,
   "md": 3rem,

scss/demo/_examples.scss

@@ -19,7 +19,6 @@
 
 .example-content {
   font-size: $font-size-base;
-  color: $body-color;
   flex: 1;
   max-width: 100%;
 }
@@ -57,3 +56,10 @@
 .example-column-2 {
   max-width: 40rem;
 }
+
+@include dark-mode {
+  .example-code {
+    border: 1px solid $border-color;
+    border-top: none;
+  }
+}
\ No newline at end of file

scss/layout/_navbar.scss

@@ -384,7 +384,7 @@ Navbar colors
 .navbar-dark {
   background: $sidenav-dark-bg;
   color: $sidenav-dark-color;
-  box-shadow: 0 0 0 1px $dark-darken;
+  box-shadow: 0 0 0 1px $dark-mode-darken;
   @include scrollbar(true);
 
   .text-muted {

scss/ui/_breadcrumbs.scss

@@ -27,6 +27,6 @@
   }
 
   .breadcrumb-item.active {
-    color: $body-color;
+    color: inherit;
   }
 }

scss/ui/_markdown.scss

@@ -2,7 +2,6 @@
 Markdown
  */
 .markdown {
-  color: $gray-800;
 
   @include media-breakpoint-up(md) {
     font-size: 1rem;
@@ -20,7 +19,6 @@ Markdown
   > {
     h1, h2, h3, h4, h5, h6 {
       margin-top: 2rem;
-      color: $body-color;
     }
   }