Allow toggling of dark scheme with a body class.

assets/css/_dark/dark-main.scss

@@ -6,8 +6,7 @@
 * MIT Licensed
 */
 
-@media (prefers-color-scheme: dark) {
-  html {
+@mixin darkScheme() {
   /* framework */
   --main-wrapper-bg: rgb(27, 27, 30);
   --topbar-wrapper-bg: rgb(39, 40, 43);
@@ -25,8 +24,8 @@
   /* common color */
   --text-color: rgb(175, 176, 177);
   --text-muted-color: rgb(107, 116, 124);
-    --link-color: rgb(138, 180, 248);
-    --link-underline-color: rgb(99, 131, 182);
+  --link-color: #3db5c2;
+  --link-underline-color: #3db5c2;
   --main-border: rgb(63, 65, 68);
   --button-bg: rgb(39, 40, 33);
   --blockquote-border: rgb(66, 66, 66);
@@ -56,5 +55,16 @@
 
   /* archives */
   --timeline-node-bg: rgb(150, 152, 156);
+}
+
+@media (prefers-color-scheme: dark) {
+  body:not(.color-scheme-light) {
+    @include darkScheme();
+  }
+}
+
+@media not (prefers-color-scheme: dark) {
+  body.color-scheme-dark {
+    @include darkScheme();
   }
 }

assets/css/_dark/dark-syntax.scss

@@ -6,8 +6,8 @@
 * MIT Licensed
 */
 
-@media (prefers-color-scheme: dark) {
-  html {
+@mixin darkSchemeHighlight() {
+
   /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
   --highlight-pre-bg: #272822;
   --highlight-hll-bg: #272822;
@@ -76,7 +76,6 @@
   /* My styles */
   --highlight-lineno: #6c6c6d;
   --highlight-lineno-border: #3c4042;
-  }
 
   pre {
     color: #818c96; /* override Bootstrap */
@@ -85,5 +84,16 @@
   kbd {
     background-color: black;
   }
-
+}
+
+@media (prefers-color-scheme: dark) {
+  body:not(.color-scheme-light) {
+    @include darkSchemeHighlight();
+  }
+}
+
+@media not (prefers-color-scheme: dark) {
+  body.color-scheme-dark {
+    @include darkSchemeHighlight();
+  }
 }