moby/brewlog
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): follow OS dark/light mode changes after manual toggle

Browse source 
Only persist theme to localStorage when the user's choice differs from
the OS preference. Clear it when they match so the prefers-color-scheme
listener remains active and automatically tracks system theme changes.
This commit is contained in:
Jon Seager 2026-02-06 16:49:16 +00:00
parent 837c548fd3
commit 195c4e5ef4
No known key found for this signature in database
1 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
templates/partials/nav.html
View file

@ -48,12 +48,16 @@
const toggleTheme = () => { const toggleTheme = () => {
const html = document.documentElement; const html = document.documentElement;
const isDark = html.getAttribute("data-theme") === "dark"; const isDark = html.getAttribute("data-theme") === "dark";
const osDark = matchMedia("(prefers-color-scheme: dark)").matches;
if (isDark) { if (isDark) {
html.removeAttribute("data-theme"); html.removeAttribute("data-theme");
localStorage.setItem("theme", "light"); // Only persist if this choice differs from OS preference
if (osDark) localStorage.setItem("theme", "light");
else localStorage.removeItem("theme");
} else { } else {
html.setAttribute("data-theme", "dark"); html.setAttribute("data-theme", "dark");
localStorage.setItem("theme", "dark"); if (!osDark) localStorage.setItem("theme", "dark");
else localStorage.removeItem("theme");
} }
updateThemeIcons(); updateThemeIcons();
}; };