a4aa968434
- Enable Tailwind "class" dark mode strategy - Use CSS custom properties for theme colors (bg, text, border) - Add ThemeProvider context with toggle and localStorage persistence - Add Sun/Moon toggle button in the header navigation - Inline script in index.html prevents FOUC on page load - All pages (Layout, Login, Register, ProtectedRoute) support both modes - Default theme follows system preference (prefers-color-scheme) Closes leeworks-agents/SPARC#33 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
55 lines
1.1 KiB
CSS
55 lines
1.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Light mode (default) */
|
|
:root {
|
|
--color-bg-dark: #f1f5f9;
|
|
--color-bg-card: #ffffff;
|
|
--color-bg-card-hover: #e2e8f0;
|
|
--color-text-primary: #0f172a;
|
|
--color-text-secondary: #475569;
|
|
--color-border: #cbd5e1;
|
|
}
|
|
|
|
/* Dark mode */
|
|
.dark {
|
|
--color-bg-dark: #0f172a;
|
|
--color-bg-card: #1e293b;
|
|
--color-bg-card-hover: #334155;
|
|
--color-text-primary: #f8fafc;
|
|
--color-text-secondary: #94a3b8;
|
|
--color-border: #334155;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--color-bg-card);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #6366f1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #4f46e5;
|
|
}
|
|
|
|
/* Selection */
|
|
::selection {
|
|
background: rgba(99, 102, 241, 0.3);
|
|
color: var(--color-text-primary);
|
|
}
|