From 9916840cb1d00aad3886d48253531657975589ce Mon Sep 17 00:00:00 2001
From: digital-garbage <133010426+digital-garbage@users.noreply.github.com>
Date: Wed, 12 Aug 2026 14:46:14 +0300
Subject: [PATCH] fix(theme): apply the colour scheme on click only
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 movie_editor/frontend/appearance_settings.js |  9 +++------
 movie_editor/frontend/theme.js               | 11 ++++-------
 2 files changed, 7 insertions(+), 13 deletions(-)

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 };
 })();