fix: Rewrite theme setting to properly support system theme

The existing code was a bit convoluted, and did not work correctly when toggling the theme back to the system theme - neither theme was properly applied on page load (cookie was present, so no theming was added) This also fixes the edge case where changing the system theme would override the site theme, due to not reading/using the cookie value correctly
ash-project · Oct 3, 2023 · 242771d · 242771d
1 parent b935c28
commit 242771d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 44 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -60,74 +60,47 @@ let isOSX = /mac/.test(platform.toLowerCase()); // Mac desktop
 
 const Hooks = {};
 
-let configuredThemeRow;
+let selectedTheme;
 if (cookiesAreAllowed()) {
-  configuredThemeRow = getCookie("theme")
+  selectedTheme = getCookie("theme");
 }
+selectedTheme = selectedTheme || "system";
 
-if (!configuredThemeRow) {
-  if (
-    window.matchMedia &&
-    window.matchMedia("(prefers-color-scheme: dark)").matches
-  ) {
-    setTheme("dark");
-  } else {
-    setTheme("light");
-  }
-}
+setTheme(selectedTheme);
 
 window
   .matchMedia("(prefers-color-scheme: dark)")
   .addEventListener("change", (event) => {
-    let configuredThemeRow;
-    if (cookiesAreAllowed()) {
-      getCookie("theme")
-    }
-
-    if (!configuredThemeRow || configuredThemeRow === "theme=system") {
-      setTheme("system");
-    } else {
-      if (configuredThemeRow === "theme=dark") {
-        setTheme("dark");
-      } else if (configuredThemeRow === "theme=light") {
-        setTheme("light");
-      } else {
-        setTheme("system");
-      }
-    }
+    setTheme(selectedTheme);
   });
 
-function setTheme(theme, set) {
-  let setTheme;
-  if (theme == "system") {
-    if (
-      window.matchMedia &&
-      window.matchMedia("(prefers-color-scheme: dark)").matches
-    ) {
-      setTheme = "dark";
+function setTheme(selectedTheme, doSetCookie = false) {
+  let newTheme = selectedTheme;
+  if (selectedTheme == "system") {
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      newTheme = "dark";
     } else {
-      setTheme = "light";
+      newTheme = "light";
     }
-  } else {
-    setTheme = theme;
   }
 
-  document.documentElement.classList.add(setTheme);
+  document.documentElement.classList.add(newTheme);
 
-  if (setTheme === "dark") {
+  if (newTheme === "dark") {
     document.documentElement.classList.remove("light");
   } else {
     document.documentElement.classList.remove("dark");
   }
 
-  if (set && cookiesAreAllowed()) {
-    setCookie("theme", theme)
+  if (doSetCookie && cookiesAreAllowed()) {
+    setCookie("theme", selectedTheme);
   }
 }
 
 Hooks.ColorTheme = {
   mounted() {
     this.handleEvent("set_theme", (payload) => {
+      selectedTheme = payload.theme;
       setTheme(payload.theme, true);
     });
   },

diff --git a/lib/ash_hq_web/views/app_view_live.ex b/lib/ash_hq_web/views/app_view_live.ex
@@ -43,7 +43,7 @@ defmodule AshHqWeb.AppViewLive do
     ~F"""
     <div
       id="app"
-      class={classes([@configured_theme, "h-full font-sans": true])}
+      class={classes(["h-full font-sans": true])}
       phx-hook="ColorTheme"
     >
       <head>