From 2dabf473c3eb7a7e9a60c21e3c1f30e454021ced Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Tue, 18 Feb 2020 22:55:15 +0100
Subject: [PATCH] dark mode fixes

---
 scss/_dark.scss           | 26 ++++++++++++--------------
 scss/_variables.scss      | 12 +++++++++---
 scss/demo/_examples.scss  |  8 +++++++-
 scss/layout/_navbar.scss  |  2 +-
 scss/ui/_breadcrumbs.scss |  2 +-
 scss/ui/_markdown.scss    |  2 --
 6 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/scss/_dark.scss b/scss/_dark.scss
index 824c8b30..6a203eb2 100644
--- a/scss/_dark.scss
+++ b/scss/_dark.scss
@@ -1,11 +1,9 @@
 // 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 {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index ec8d763f..edc2c968 100644
--- a/scss/_variables.scss
+++ b/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,
diff --git a/scss/demo/_examples.scss b/scss/demo/_examples.scss
index 423f2e07..6e36d6c4 100644
--- a/scss/demo/_examples.scss
+++ b/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
diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss
index 917afa29..9a4a77f7 100644
--- a/scss/layout/_navbar.scss
+++ b/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 {
diff --git a/scss/ui/_breadcrumbs.scss b/scss/ui/_breadcrumbs.scss
index bc996f1a..4a67daa9 100644
--- a/scss/ui/_breadcrumbs.scss
+++ b/scss/ui/_breadcrumbs.scss
@@ -27,6 +27,6 @@
   }
 
   .breadcrumb-item.active {
-    color: $body-color;
+    color: inherit;
   }
 }
diff --git a/scss/ui/_markdown.scss b/scss/ui/_markdown.scss
index 03eb02eb..8da00183 100644
--- a/scss/ui/_markdown.scss
+++ b/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;
     }
   }
 
-- 
GitLab