mirror of
https://github.com/ash-project/ash_hq.git
synced 2024-09-19 21:03:30 +12:00
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
This commit is contained in:
parent
b935c289d2
commit
242771dca9
2 changed files with 17 additions and 44 deletions
|
@ -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);
|
||||
});
|
||||
},
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue