From 784188cf52731a6eddd65edc16b6e6db1338553b Mon Sep 17 00:00:00 2001
From: Kacper <kacperlachowiczwp.pl@wp.pl>
Date: Wed, 17 Dec 2025 21:18:54 +0100
Subject: [PATCH] fix: improve theme handling to support all themes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- index.html: Apply actual theme class instead of only 'dark'
- __root.tsx: Use themeOptions to dynamically generate theme classes
  - Fixes missing themes: cream, sunset, gray

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/ui/index.html            |  7 ++++---
 apps/ui/src/routes/__root.tsx | 10 ++++++----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/ui/index.html b/apps/ui/index.html
index 02e2e0be..02087b01 100644
--- a/apps/ui/index.html
+++ b/apps/ui/index.html
@@ -7,15 +7,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <script>
-      // Prevent dark mode flash
+      // Prevent theme flash - apply stored theme before React hydrates
       (function() {
         try {
           const stored = localStorage.getItem('automaker-storage');
           if (stored) {
             const data = JSON.parse(stored);
             const theme = data.state?.theme;
-            if (theme === 'dark') {
-              document.documentElement.classList.add('dark');
+            if (theme && theme !== 'system' && theme !== 'light') {
+              // Apply the actual theme class (dark, retro, dracula, nord, etc.)
+              document.documentElement.classList.add(theme);
             } else if (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
               document.documentElement.classList.add('dark');
             }
diff --git a/apps/ui/src/routes/__root.tsx b/apps/ui/src/routes/__root.tsx
index 4aaaf0c7..17f9c1dc 100644
--- a/apps/ui/src/routes/__root.tsx
+++ b/apps/ui/src/routes/__root.tsx
@@ -6,6 +6,7 @@ import { useAppStore } from "@/store/app-store";
 import { useSetupStore } from "@/store/setup-store";
 import { getElectronAPI } from "@/lib/electron";
 import { Toaster } from "sonner";
+import { themeOptions } from "@/config/theme-options";
 
 function RootLayoutContent() {
   const location = useLocation();
@@ -84,10 +85,11 @@ function RootLayoutContent() {
   // Apply theme class to document
   useEffect(() => {
     const root = document.documentElement;
-    root.classList.remove(
-      "dark", "retro", "light", "dracula", "nord", "monokai",
-      "tokyonight", "solarized", "gruvbox", "catppuccin", "onedark", "synthwave", "red"
-    );
+    // Remove all theme classes dynamically from themeOptions
+    const themeClasses = themeOptions
+      .map((option) => option.value)
+      .filter((theme) => theme !== "system");
+    root.classList.remove(...themeClasses);
 
     if (effectiveTheme === "dark") {
       root.classList.add("dark");