Fixed dark mode compatibility for old browsers.

cotes2020 · cotes2020 · commit 556110e41fd5 · 2020-02-26T03:13:09.000+08:00
refer to issue cotes2020#30
diff --git a/assets/css/_dark/dark-main.scss b/assets/css/_dark/dark-main.scss
@@ -106,42 +106,39 @@
 } // dark-scheme
 
 
-@mixin light-mode-invisible {
-  *[light-mode-invisible] {
-      display: none;
+@mixin set-visible($light-display, $dark-display) {
+  [light-mode-invisible] {
+    display: $light-display;
   }
-}
 
-@mixin dark-mode-invisible {
-  *[dark-mode-invisible] {
-      display: none;
+  [dark-mode-invisible] {
+    display: $dark-display;
   }
 }
 
-@media (prefers-color-scheme: light) {
-
-  html:not([mode]), html[mode=light] {
-    @include light-mode-invisible;
-  }
-
-  html[mode=dark] {
+@mixin mode-toggle($dark-mode: false) {
+  @if $dark-mode {
+    @include set-visible(inline-block, none);
     @include dark-scheme;
-    @include dark-mode-invisible;
+  } @else {
+    @include set-visible(none, inline-block);
   }
+}
 
-} // light prefers
+html:not([mode]), html[mode=light] {
+  @include mode-toggle();
+}
 
+html[mode=dark] {
+  @include mode-toggle(true);
+}
 
 @media (prefers-color-scheme: dark) {
-
   html:not([mode]), html[mode=dark] {
-    @include dark-scheme;
-    @include dark-mode-invisible;
+    @include mode-toggle(true);
   }
 
   html[mode=light] {
-    @include light-mode-invisible;
+    @include mode-toggle();
   }
-
-} // dark prefers
-
+}
diff --git a/assets/css/_dark/dark-syntax.scss b/assets/css/_dark/dark-syntax.scss
@@ -6,7 +6,13 @@
 * MIT Licensed
 */
 
-@mixin dark-scheme {
+@mixin box-shadow($val) {
+  -moz-box-shadow: $val;
+  -webkit-box-shadow: $val;
+  box-shadow: $val;
+}
+
+@mixin dark-syntax-scheme {
   /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
   --highlight-pre-bg: #272822;
   --highlight-hll-bg: #272822;
@@ -75,6 +81,7 @@
   /* My styles */
   --highlight-lineno: #6c6c6d;
   --highlight-lineno-border: #3c4042;
+  --highlighter-rouge: #de6b18;
 
   pre {
     color: #818c96; /* override Bootstrap */
@@ -83,16 +90,9 @@
   kbd {
     background-color: black;
   }
-}
 
-@media (prefers-color-scheme: dark) {
-  html:not([mode]), html[mode=dark] {
-    @include dark-scheme;
+  .highlight {
+    @include box-shadow(none);
   }
-}
 
-@media (prefers-color-scheme: light) {
-  html[mode=dark] {
-    @include dark-scheme;
-  }
-}
+} // mixin dark-syntax-scheme
diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss
@@ -88,6 +88,7 @@
 .highlighter-rouge {
   @extend %highlight-pre-bg;
   @extend %code-snippet-radius;
+  color: var(--highlighter-rouge, black);
   margin-bottom: 1.2em; /* Override BS Inline-code style */
 }
 
@@ -100,7 +101,7 @@
     @extend %highlight-pre-bg;
   }
   overflow: auto;
-
+  @include box-shadow(inset 0 0 2px #c2c6cc);
   .lineno {
     margin: .8rem 0rem;
     padding: 0 .5rem;
@@ -142,11 +143,11 @@ code {
   -ms-hyphens: none;
   -moz-hyphens: none;
   hyphens: none;
-
   &.highlighter-rouge {
     padding: 2px 4px;
     margin: 0 .3rem;
     border-radius: 4px;
+    border: 1px solid var(--highlight-pre-bg, #e9ecef);
   }
 }
 
@@ -155,7 +156,6 @@ td.rouge-code {
   padding-right: 1rem;
 }
 
-
 /* Hide line numbers for defualt, console, and terminal code snippets */
 div[class^='highlighter-rouge'] pre.lineno,
 div.language-console.highlighter-rouge pre.lineno,
@@ -169,28 +169,12 @@ div.language-terminal.highlighter-rouge td.rouge-code {
   padding: .8rem 1rem;
 }
 
-@mixin light-syntax-base {
-  .highlight {
-    -moz-box-shadow: inset 0 0 2px #c2c6cc;
-    -webkit-box-shadow: inset 0 0 2px #c2c6cc;
-    box-shadow: inset 0 0 2px #c2c6cc;
-  }
-  .highlighter-rouge {
-    color: black;
-  }
-  code.highlighter-rouge {
-    border: 1px solid #e9ecef;
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  html:not([mode=dark]) {
-    @include light-syntax-base;
-  }
+html[mode=dark] {
+  @include dark-syntax-scheme;
 }
 
 @media (prefers-color-scheme: dark) {
-  html[mode=light] {
-    @include light-syntax-base;
+  html:not([mode]), html[mode=dark] {
+    @include dark-syntax-scheme;
   }
 }
