fix(frontend): make dark mode toggle actually work

The dark mode button was toggling React state but never applying it to the DOM. Add a useDarkMode hook that: - Persists the preference in localStorage - Defaults to the OS prefers-color-scheme on first visit - Adds/removes the 'dark' class on <html> to trigger CSS variable overrides Also add dark-mode color overrides for all Tailwind v4 theme variables in index.css. Co-authored-by: openhands <openhands@all-hands.dev>
2026-06-11 21:50:13 +02:00
parent dd12631f07
commit 615e02e970
2 changed files with 60 additions and 26 deletions
@@ -1,5 +1,5 @@
-@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import "tailwindcss";

@theme {
 	--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
@@ -39,6 +39,41 @@
 	--color-sidebar-ring: #4f8cff;
 }

+.dark {
+	--color-background: #0f172a;
+	--color-foreground: #f8fafc;
+	--color-card: #1e293b;
+	--color-card-foreground: #f8fafc;
+	--color-popover: #1e293b;
+	--color-popover-foreground: #f8fafc;
+	--color-primary: #4f8cff;
+	--color-primary-foreground: #ffffff;
+	--color-secondary: #1e293b;
+	--color-secondary-foreground: #f8fafc;
+	--color-muted: #334155;
+	--color-muted-foreground: #94a3b8;
+	--color-accent: #334155;
+	--color-accent-foreground: #f8fafc;
+	--color-destructive: #ef4444;
+	--color-destructive-foreground: #ffffff;
+	--color-border: #334155;
+	--color-input: #334155;
+	--color-ring: #4f8cff;
+	--color-chart-1: #4f8cff;
+	--color-chart-2: #22c55e;
+	--color-chart-3: #f59e0b;
+	--color-chart-4: #ef4444;
+	--color-chart-5: #8b5cf6;
+	--color-sidebar-background: #0f172a;
+	--color-sidebar-foreground: #f8fafc;
+	--color-sidebar-primary: #4f8cff;
+	--color-sidebar-primary-foreground: #ffffff;
+	--color-sidebar-accent: #334155;
+	--color-sidebar-accent-foreground: #f8fafc;
+	--color-sidebar-border: #334155;
+	--color-sidebar-ring: #4f8cff;
+}
+
@layer base {
 	body {
 		background-color: var(--color-background);