Fix theme flashing.

Orange-OpenSource · Apr 4, 2024 · 1a98a69 · 1a98a69
1 parent 0d893f7
commit 1a98a69
Showing 1 changed file with 19 additions and 14 deletions.
diff --git a/sites/hurl.dev/_includes/common.js b/sites/hurl.dev/_includes/common.js
@@ -1,5 +1,15 @@
+let currentTheme = localStorage.getItem("theme");
+if (!currentTheme) {
+    currentTheme = systemInitiatedDark().matches ? "dark" : "light";
+}
+setTheme(currentTheme);
+
 addEventListener("load", onLoad);
 
+function systemInitiatedDark() {
+    return window.matchMedia("(prefers-color-scheme: dark)");
+}
+
 function toggleElem() {
     return document.getElementById("theme-toggle");
 }
@@ -8,33 +18,28 @@ function menuElem() {
     return document.getElementById("menu");
 }
 
-
 function onLoad() {
-    const systemInitiatedDark = window.matchMedia("(prefers-color-scheme: dark)");
-    const defaultTheme = systemInitiatedDark.matches ? "dark" : "light";
-
     // This checks for local storage telling to override the system preferences
     let currentTheme = localStorage.getItem("theme");
-    if (!currentTheme) {
-        currentTheme = defaultTheme;
-    }
-
     setTheme(currentTheme);
 
     toggleElem().addEventListener("click", onThemeClick);
     menuElem().addEventListener("click", onMenuClick);
-    systemInitiatedDark.addEventListener("change", onPreferColorSchemeChange);
+    systemInitiatedDark().addEventListener("change", onPreferColorSchemeChange);
 }
 
 function setTheme(theme) {
     const lightElem = "<span class=\"svg-icon\"><svg viewBox=\"0 0 512 512\" width=\"18\" height=\"18\"><use href=\"#sun\"></use></svg>&nbsp;</span><span class=\"u-underline\">Theme</span>";
     const darkElem = "<span class=\"svg-icon\"><svg viewBox=\"0 0 512 512\" width=\"18\" height=\"18\"><use href=\"#moon\"></use></svg>&nbsp;</span><span class=\"u-underline\">Theme</span>";
     document.documentElement.setAttribute("data-theme", theme);
-    if (theme === "dark") {
-        toggleElem().innerHTML = lightElem;
-    }
-    else {
-        toggleElem().innerHTML = darkElem;
+    const elem = toggleElem();
+    if (elem) {
+        if (theme === "dark") {
+            elem.innerHTML = lightElem;
+        }
+        else {
+            elem.innerHTML = darkElem;
+        }
     }
     localStorage.setItem("theme", theme);
 }