ash-project/ash_hq
1
0
Fork 0
mirror of https://github.com/ash-project/ash_hq.git synced 2024-09-19 12:53:49 +12:00
Code Issues Projects Releases Packages Wiki Activity

fix: Rewrite theme setting to properly support system theme

Browse source 
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:
Rebecca Le 2023-10-03 11:35:59 +08:00
parent b935c289d2
commit 242771dca9
No known key found for this signature in database
GPG key ID: F477E2CCB1FC1BA0
2 changed files with 17 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
assets/js/app.js
View file

@ -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);
});
},

2
lib/ash_hq_web/views/app_view_live.ex
View file

@ -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>