fix 'prefers-color-scheme: dark' overriding light theme

removes media query 'prefers-color-scheme: dark', because it overrides
light theme root variables. added new localstorage variable that checks
for preference and if it has been set to dark before. not adding this
check would result in random theme switches.

2 files changed, 8 insertions, 15 deletions

diff --git a/static/css/main.css b/static/css/main.css
index 3ce386f..e4e5973 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -64,21 +64,6 @@
   --inline-cd-color: #37342E;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-color: #181714;
-    --txt-color: #FFEECA;
-    --line-color: #433F37;
-    --fn-color: #534F47;
-    --ft-txt-color: #FFEECA;
-    --lk-color: #8192AE;
-    --hover-color: #B1A184;
-    --bq-color: #75271E;
-    --tb1-color: #47443B;
-    --inline-cd-color: #37342E;
-  }
-}
-
 html {
   background-color: var(--bg-color);
 }
diff --git a/static/js/dark-mode.js b/static/js/dark-mode.js
index acea8f8..bffba78 100644
--- a/static/js/dark-mode.js
+++ b/static/js/dark-mode.js
@@ -30,3 +30,11 @@ function switchTheme() {
 }
 
 toggleSwitch.addEventListener('click', switchTheme, false);
+
+window.onload = function() {
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches && !localStorage.getItem('prefers-color-scheme-dark')) {
+        localStorage.setItem('theme', 'light');
+        switchTheme();
+        localStorage.setItem('prefers-color-scheme-dark', true);
+    }
+};