diff --git a/movie_editor/frontend/appearance_settings.js b/movie_editor/frontend/appearance_settings.js index 239cb104..7a6b589f 100644 --- a/movie_editor/frontend/appearance_settings.js +++ b/movie_editor/frontend/appearance_settings.js @@ -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); diff --git a/movie_editor/frontend/theme.js b/movie_editor/frontend/theme.js index f6a82717..5dad7af0 100644 --- a/movie_editor/frontend/theme.js +++ b/movie_editor/frontend/theme.js @@ -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 }; })();