static/js/forms: Add theme switch

2 files changed, 26 insertions, 5 deletions

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)"; }
+            }
+          }
+        }
+      }
     });
    });
 })();