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:
co-authored by
Claude Opus 5
parent
03c0b2dcd9
commit
9916840cb1
@@ -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);
|
||||
|
||||
@@ -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 };
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user