Revert "theme: simplify device dark theme detection"

This reverts commit 266835b881.

assets/css/custom.css

@@ -9,6 +9,7 @@
   --post-time-color: #757575;
   --strong-color: #303030;
   --code-background-color: #202020;
+  --color-mode: 'light';
   --color-light: var(--background-color);
   --button-icon: var(--icon-moon);
   --button-icon-filter: var(--icon-moon-filter);
@@ -25,6 +26,32 @@
   --sans-font: -apple-system,BlinkMacSystemFont,"avenir next",avenir,helvetica,"helvetica neue",ubuntu,roboto,noto,"segoe ui",arial,sans-serif;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root:not([data-user-color-scheme]) {
+    --sidebar-color: #121212;
+    --background-color: #202020;
+    --text-color: #f0f0f0;
+    --heading-color: white;
+    --blockquote-color: #bababa;
+    --inline-code-text-color: #f82439;
+    --inline-code-background-color: #202020;
+    --post-time-color: #bababa;
+    --code-background-color: #000000;
+    --strong-color: white;
+    --color-mode: 'dark';
+    --button-icon: var(--icon-sun);
+    --button-icon-filter: var(--icon-sun-filter);
+    --button-color: var(--color-dark);
+    --border-color: var(--color-light-alpha);
+    --toggle-button-label: "Disable dark mode";
+  }
+
+  .link {
+    color: #0091ff;
+    text-decoration: none;
+  }
+}
+
 [data-user-color-scheme='dark'] {
   --sidebar-color: #121212;
   --background-color: #202020;
@@ -36,6 +63,7 @@
   --post-time-color: #bababa;
   --code-background-color: #000000;
   --strong-color: white;
+  --color-mode: 'dark';
   --button-icon: var(--icon-sun);
   --button-icon-filter: var(--icon-sun-filter);
   --button-color: var(--color-dark);

assets/js/theme-switcher.js

@@ -1,3 +1,4 @@
+const COLOR_MODE_KEY = '--color-mode';
 const STORAGE_KEY = 'user-color-scheme';
 const modeToggleButtonMobile = document.querySelector('.js-mode-toggle');
 const modeToggleButtonDesktop = document.querySelector(
@@ -13,12 +14,21 @@ const applySetting = (passedSetting) => {
         );
     }
 };
+const getCSSCustomProp = (propKey) => {
+    let response = getComputedStyle(document.documentElement).getPropertyValue(
+        propKey
+    );
+    if (response.length) {
+        response = response.replace(/\"/g, '').trim();
+    }
+    return response;
+};
 const toggleSetting = () => {
     let currentSetting = localStorage.getItem(STORAGE_KEY);
     switch (currentSetting) {
         case null:
-            const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-            currentSetting = userPrefersDark ? 'dark' : 'light';
+            currentSetting =
+                getCSSCustomProp(COLOR_MODE_KEY) === 'dark' ? 'light' : 'dark';
             break;
         case 'light':
             currentSetting = 'dark';