fix(theme): apply the colour scheme on click only

The picker previewed on hover, and preview stamped data-theme-pref as well as
data-theme. That attribute is what get() reads, so after clicking a card, hovering
another and moving away restored the HOVERED theme, not the chosen one — clicking
looked like it did nothing.

Hover preview is gone entirely: the theme now changes on an explicit click and
nothing else, which removes the ambiguity rather than patching it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
digital-garbage
2026-08-12 14:46:14 +03:00
co-authored by Claude Opus 5
parent 03c0b2dcd9
commit 9916840cb1
2 changed files with 7 additions and 13 deletions
+3 -6
View File
@@ -34,12 +34,9 @@
meta.append(el("div", "theme-card-title", title));
meta.append(el("div", "theme-card-hint", hint));
c.append(meta);
// Hovering paints the whole app in that theme; leaving puts back whatever is
// actually chosen, so the preview can never strand you in an unpicked theme.
c.onmouseenter = () => T.preview(key);
c.onmouseleave = () => T.preview(T.get());
c.onfocus = () => T.preview(key);
c.onblur = () => T.preview(T.get());
// Click only — no hover preview. Repainting the whole app on a mouse-over made the
// theme feel like it was changing on its own, and left the picker guessing which
// choice was the real one.
c.onclick = () => { T.apply(key); paint(key); onPick && onPick(key); };
cards[key] = c;
grid.append(c);
+4 -7
View File
@@ -31,6 +31,9 @@
return choice === "auto" ? (systemIsLight() ? "light" : "dark") : choice;
}
// data-theme is what the stylesheet reads; data-theme-pref is the choice behind it
// ("auto" resolves to one of the other two). The theme changes on an explicit click
// and nothing else, so these two always move together.
function stamp(choice) {
const resolved = resolve(choice);
document.documentElement.setAttribute("data-theme", resolved);
@@ -70,12 +73,6 @@
return res;
}
// Preview without committing — the wizard's theme step paints the whole screen
// as you hover a card, and must be able to put it back if you pick another.
function preview(choice) {
return apply(choice, { persist: false });
}
function onChange(fn) {
listeners.add(fn);
return () => listeners.delete(fn);
@@ -83,5 +80,5 @@
apply(stored(), { persist: false });
window.FunPackTheme = { get, resolved, apply, preview, onChange, CHOICES };
window.FunPackTheme = { get, resolved, apply, onChange, CHOICES };
})();