Auto-detect preferred colorscheme

flip1995 · May 19, 2022 · 569505c · 569505c
1 parent 6f26383
commit 569505c
Showing 1 changed file with 23 additions and 11 deletions.
diff --git a/util/gh-pages/script.js b/util/gh-pages/script.js
@@ -343,17 +343,23 @@ function setTheme(theme, store) {
     let enableNight = false;
     let enableAyu = false;
 
-    if (theme == "ayu") {
-        enableAyu = true;
-    } else if (theme == "coal" || theme == "navy") {
-        enableNight = true;
-    } else if (theme == "rust") {
-        enableHighlight = true;
-    } else {
-        enableHighlight = true;
-        // this makes sure that an unknown theme request gets set to a known one
-        theme = "light";
+    switch(theme) {
+        case "ayu":
+            enableAyu = true;
+            break;
+        case "coal":
+        case "navy":
+            enableNight = true;
+            break;
+        case "rust":
+            enableHighlight = true;
+            break;
+        default:
+            enableHighlight = true;
+            theme = "light";
+            break;
     }
+
     document.getElementsByTagName("body")[0].className = theme;
 
     document.getElementById("styleHighlight").disabled = !enableHighlight;
@@ -368,4 +374,10 @@ function setTheme(theme, store) {
 }
 
 // loading the theme after the initial load
-setTheme(localStorage.getItem('clippy-lint-list-theme'), false);
+const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+const theme = localStorage.getItem('clippy-lint-list-theme');
+if (prefersDark.matches && !theme) {
+    setTheme("coal", false);
+} else {
+    setTheme(theme, false);
+}