From 151ad552ca23100136d96014377851ce6ca2f388 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 21 Sep 2025 16:29:37 -0700
Subject: [PATCH] Fix: dont lose color when switching light / dark (#5796)

---
 src/pages/index.jsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index d4eaa91fb..599a1c63c 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -499,6 +499,7 @@ function Home({ initialSettings }) {
 
 export default function Wrapper({ initialSettings, fallback }) {
   const { theme } = useContext(ThemeContext);
+  const { color } = useContext(ColorContext);
   let backgroundImage = "";
   let opacity = initialSettings?.backgroundOpacity ?? 0;
   let backgroundBlur = false;
@@ -527,14 +528,22 @@ export default function Wrapper({ initialSettings, fallback }) {
     html.classList.toggle("dark", theme === "dark");
     html.classList.add(theme === "dark" ? "scheme-dark" : "scheme-light");
 
-    html.classList.remove(...Array.from(html.classList).filter((cls) => cls.startsWith("theme-")));
-    html.classList.add(`theme-${initialSettings.color || "slate"}`);
+    const desiredThemeClass = `theme-${color || initialSettings.color || "slate"}`;
+    const themeClassesToRemove = Array.from(html.classList).filter(
+      (cls) => cls.startsWith("theme-") && cls !== desiredThemeClass,
+    );
+    if (themeClassesToRemove.length) {
+      html.classList.remove(...themeClassesToRemove);
+    }
+    if (!html.classList.contains(desiredThemeClass)) {
+      html.classList.add(desiredThemeClass);
+    }
 
     // Remove any previously applied inline styles
     body.style.backgroundImage = "";
     body.style.backgroundColor = "";
     body.style.backgroundAttachment = "";
-  }, [backgroundImage, opacity, theme, initialSettings.color]);
+  }, [backgroundImage, opacity, theme, color, initialSettings.color]);
 
   return (
     <>