static/js/forms: Add theme switch

4 files changed, 54 insertions, 9 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index ba39e71..5e2e989 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -73,7 +73,7 @@
   --warning-background: #ffe699;
   --warning: #332600;
   --widget-background: hsl(var(--secondary), 25%, 97%);
-  color-scheme: light dark;
+  color-scheme: light;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -108,6 +108,7 @@
     --warning-background: #a89700;
     --warning: #000;
     --widget-background: hsl(var(--secondary), 0%, 9%);
+    color-scheme: dark;
   }
   kbd,
   img,
diff --git a/assets/js/index.js b/assets/js/index.js
index 15f720a..a6c5f47 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -746,15 +746,38 @@
             if (localStorage["config.layout.simple"] === "on") stylesheet.rel = "stylesheet";
             if (localStorage["config.layout.default"] === "on") stylesheet.rel = "alternate stylesheet";
             stylesheet = document.querySelector('link[href$="default-fast.css"]');
-            if (localStorage["config.speed.fast"] === "on") stylesheet.rel = "stylesheet";
-            if (localStorage["config.speed.slow"] === "on") stylesheet.rel = "alternate stylesheet";
+            if (localStorage["config.navigation.fast"] === "on") stylesheet.rel = "stylesheet";
+            if (localStorage["config.navigation.slow"] === "on") stylesheet.rel = "alternate stylesheet";
+            for(var i1 = 0; i1 < document.styleSheets.length; i1++){
+                let stylesheet = document.styleSheets[i1];
+                for(var k = 0; k < stylesheet.rules.length; k++){
+                    let media = stylesheet.rules[k].media;
+                    if (media && media.mediaText.includes("prefers-color-scheme")) {
+                        if (localStorage["config.theme.light"] === "on") {
+                            media.mediaText = "(prefers-color-scheme: dark)";
+                            if (getComputedStyle(document.body).getPropertyValue("color-scheme") === "dark") {
+                                media.mediaText = "(prefers-color-scheme: light)";
+                            }
+                        }
+                        if (localStorage["config.theme.auto"] === "on") {
+                            media.mediaText = "(prefers-color-scheme: dark)";
+                        }
+                        if (localStorage["config.theme.dark"] === "on") {
+                            media.mediaText = "(prefers-color-scheme: light)";
+                            if (getComputedStyle(document.body).getPropertyValue("color-scheme") === "light") {
+                                media.mediaText = "(prefers-color-scheme: dark)";
+                            }
+                        }
+                    }
+                }
+            }
         });
     });
 })();
 (function() {
     const timeout = 300;
     const state = "on";
-    const key = "config.speed.fast";
+    const key = "config.navigation.fast";
     function fetch(url, method, callback) {
         const http = new XMLHttpRequest();
         http.onreadystatechange = function() {
diff --git a/static/js/domfilter.ts b/static/js/domfilter.ts
index 0274ed0..a33faca 100644
--- a/static/js/domfilter.ts
+++ b/static/js/domfilter.ts
@@ -8,7 +8,7 @@
   const timeout: millisecond = 300;
 
   const state = "on";
-  const key = "config.speed.fast";
+  const key = "config.navigation.fast";
 
   function fetch(url, method, callback) {
     const http = new XMLHttpRequest();
diff --git a/static/js/forms.ts b/static/js/forms.ts
index 15bb64f..533623f 100644
--- a/static/js/forms.ts
+++ b/static/js/forms.ts
@@ -75,14 +75,35 @@
 
       stylesheet = document.querySelector('link[href$="default-simple.css"]')
 
-      if (localStorage["config.layout.simple"]  === "on") stylesheet.rel = "stylesheet"
-      if (localStorage["config.layout.default"] === "on") stylesheet.rel = "alternate stylesheet"
+      if (localStorage["config.layout.simple"]  === "on")  stylesheet.rel = "stylesheet"
+      if (localStorage["config.layout.default"] === "on")  stylesheet.rel = "alternate stylesheet"
 
       stylesheet = document.querySelector('link[href$="default-fast.css"]')
 
-      if (localStorage["config.speed.fast"] === "on") stylesheet.rel = "stylesheet"
-      if (localStorage["config.speed.slow"] === "on") stylesheet.rel = "alternate stylesheet"
+      if (localStorage["config.navigation.fast"] === "on") stylesheet.rel = "stylesheet"
+      if (localStorage["config.navigation.slow"] === "on") stylesheet.rel = "alternate stylesheet"
+
+      for (var i = 0; i < document.styleSheets.length; i++) {
+        let stylesheet = document.styleSheets[i];
+        for (var k = 0; k < stylesheet.rules.length; k++) {
+          let media = stylesheet.rules[k].media;
+          if (media && media.mediaText.includes("prefers-color-scheme")) {
+            if (localStorage["config.theme.light"] === "on") {
+              media.mediaText = "(prefers-color-scheme: dark)";
+              if (getComputedStyle(document.body).getPropertyValue("color-scheme") === "dark") { media.mediaText = "(prefers-color-scheme: light)"; }
+            }
+
+            if (localStorage["config.theme.auto"] === "on") {
+              media.mediaText = "(prefers-color-scheme: dark)";
+            }
 
+            if (localStorage["config.theme.dark"] === "on") {
+              media.mediaText = "(prefers-color-scheme: light)";
+              if (getComputedStyle(document.body).getPropertyValue("color-scheme") === "light") { media.mediaText = "(prefers-color-scheme: dark)"; }
+            }
+          }
+        }
+      }
     });
    });
 })();