From 9cd312ddf0ffd91391d222aba8bde3ce69e23cb3 Mon Sep 17 00:00:00 2001
From: Seif Soliman <byseif21@gmail.com>
Date: Mon, 23 Jun 2025 16:01:25 +0300
Subject: [PATCH] fix(theme): wrong theme application during preview
 (@byseif21) (#6617)

### Description

Closes #6616

Changes:
- Refactored theme preview state management to use a single state object
- Removed redundant state variables
- Maintained the same debouncing behavior for smooth scrolling
---
 .../src/ts/controllers/theme-controller.ts    | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index 95011cacb..6e12660c4 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -231,20 +231,27 @@ function updateFooterIndicator(nameOverride?: string): void {
   }
 }
 
+type PreviewState = {
+  theme: string;
+  colors?: string[];
+} | null;
+
+let previewState: PreviewState = null;
+
 export function preview(
   themeIdentifier: string,
   customColorsOverride?: string[]
 ): void {
-  debouncedPreview(themeIdentifier, customColorsOverride);
+  previewState = { theme: themeIdentifier, colors: customColorsOverride };
+  debouncedPreview();
 }
 
-const debouncedPreview = debounce<(t: string, c?: string[]) => void>(
-  250,
-  (themeIdenfitier, customColorsOverride) => {
+const debouncedPreview = debounce<() => void>(250, () => {
+  if (previewState) {
     isPreviewingTheme = true;
-    void apply(themeIdenfitier, customColorsOverride, true);
+    void apply(previewState.theme, previewState.colors, true);
   }
-);
+});
 
 async function set(
   themeIdentifier: string,
@@ -264,6 +271,8 @@ async function set(
 }
 
 export async function clearPreview(applyTheme = true): Promise<void> {
+  previewState = null;
+
   if (isPreviewingTheme) {
     isPreviewingTheme = false;
     if (applyTheme) {