fix: improve theme handling to support all themes

- 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,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');
             }

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");