ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-02-05 09:33:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve theme handling to support all themes

Browse Source 
- 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>
This commit is contained in:
Kacper
2025-12-17 21:18:54 +01:00
parent 1d945f4f75
commit 784188cf52
2 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/ui/index.html
View File

@@ -7,15 +7,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<script> <script>
// Prevent dark mode flash // Prevent theme flash - apply stored theme before React hydrates
(function() { (function() {
try { try {
const stored = localStorage.getItem('automaker-storage'); const stored = localStorage.getItem('automaker-storage');
if (stored) { if (stored) {
const data = JSON.parse(stored); const data = JSON.parse(stored);
const theme = data.state?.theme; const theme = data.state?.theme;
if (theme === 'dark') { if (theme && theme !== 'system' && theme !== 'light') {
document.documentElement.classList.add('dark'); // 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) { } else if (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
} }

10
apps/ui/src/routes/__root.tsx
View File

@@ -6,6 +6,7 @@ import { useAppStore } from "@/store/app-store";
import { useSetupStore } from "@/store/setup-store"; import { useSetupStore } from "@/store/setup-store";
import { getElectronAPI } from "@/lib/electron"; import { getElectronAPI } from "@/lib/electron";
import { Toaster } from "sonner"; import { Toaster } from "sonner";
import { themeOptions } from "@/config/theme-options";
function RootLayoutContent() { function RootLayoutContent() {
const location = useLocation(); const location = useLocation();
@@ -84,10 +85,11 @@ function RootLayoutContent() {
// Apply theme class to document // Apply theme class to document
useEffect(() => { useEffect(() => {
const root = document.documentElement; const root = document.documentElement;
root.classList.remove( // Remove all theme classes dynamically from themeOptions
"dark", "retro", "light", "dracula", "nord", "monokai", const themeClasses = themeOptions
"tokyonight", "solarized", "gruvbox", "catppuccin", "onedark", "synthwave", "red" .map((option) => option.value)
); .filter((theme) => theme !== "system");
root.classList.remove(...themeClasses);
if (effectiveTheme === "dark") { if (effectiveTheme === "dark") {
root.classList.add("dark"); root.classList.add("dark");