From d5d250b2151eee85dd8f0c563641b035eb8fd695 Mon Sep 17 00:00:00 2001 From: AI Christianson Date: Thu, 13 Mar 2025 19:53:00 -0400 Subject: [PATCH] fix dark theme --- components.json | 2 +- frontend/common/dist/styles/global.css | 24 ++++++ frontend/common/src/styles/global.css | 44 ++++------ frontend/common/tailwind.config.js | 1 + frontend/web/src/index.tsx | 112 +++++++++++++++++++++++-- 5 files changed, 150 insertions(+), 33 deletions(-) diff --git a/components.json b/components.json index dbdec16..fc412d0 100644 --- a/components.json +++ b/components.json @@ -6,7 +6,7 @@ "tailwind": { "config": "frontend/common/tailwind.config.js", "css": "frontend/common/src/styles/global.css", - "baseColor": "slate", + "baseColor": "zinc", "cssVariables": true }, "aliases": { diff --git a/frontend/common/dist/styles/global.css b/frontend/common/dist/styles/global.css index 4251603..b2ec08a 100644 --- a/frontend/common/dist/styles/global.css +++ b/frontend/common/dist/styles/global.css @@ -531,6 +531,30 @@ video { --radius: 0.5rem; } + + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; + + --radius: 0.5rem; + } * { border-color: hsl(var(--border)); } diff --git a/frontend/common/src/styles/global.css b/frontend/common/src/styles/global.css index 4475bff..6b59afe 100644 --- a/frontend/common/src/styles/global.css +++ b/frontend/common/src/styles/global.css @@ -37,33 +37,25 @@ } .dark { - --background: 240 10% 3.9%; - --foreground: 0 0% 98%; - - --card: 240 10% 3.9%; - --card-foreground: 0 0% 98%; - - --popover: 240 10% 3.9%; - --popover-foreground: 0 0% 98%; - - --primary: 0 0% 98%; - --primary-foreground: 240 5.9% 10%; - - --secondary: 240 3.7% 15.9%; - --secondary-foreground: 0 0% 98%; - - --muted: 240 3.7% 15.9%; - --muted-foreground: 240 5% 64.9%; - - --accent: 240 3.7% 15.9%; - --accent-foreground: 0 0% 98%; - + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 0% 98%; - - --border: 240 3.7% 15.9%; - --input: 240 3.7% 15.9%; - --ring: 240 4.9% 83.9%; + --destructive-foreground: 210 40% 98%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; --radius: 0.5rem; } diff --git a/frontend/common/tailwind.config.js b/frontend/common/tailwind.config.js index 32997c8..4b19cc9 100644 --- a/frontend/common/tailwind.config.js +++ b/frontend/common/tailwind.config.js @@ -4,6 +4,7 @@ module.exports = { content: [ './src/**/*.{js,jsx,ts,tsx}', ], + safelist: ['dark'], theme: { extend: {}, }, diff --git a/frontend/web/src/index.tsx b/frontend/web/src/index.tsx index 2697b5a..f60a342 100644 --- a/frontend/web/src/index.tsx +++ b/frontend/web/src/index.tsx @@ -10,6 +10,27 @@ import { } from '@ra-aid/common'; // The CSS import happens through the common package's index.ts +// Theme management helper function +const setupTheme = () => { + // Check if theme preference is stored in localStorage + const storedTheme = localStorage.getItem('theme'); + + // Default to dark mode unless explicitly set to light + const isDark = storedTheme ? storedTheme === 'dark' : true; + + // Apply theme class to document element (html) for better CSS specificity + if (isDark) { + document.documentElement.classList.add('dark'); + } else { + document.documentElement.classList.remove('dark'); + } + + // Store the current theme preference + localStorage.setItem('theme', isDark ? 'dark' : 'light'); + + return isDark; +}; + const App = () => { // State for drawer open/close const [isDrawerOpen, setIsDrawerOpen] = useState(false); @@ -17,10 +38,19 @@ const App = () => { // State for selected session const [selectedSessionId, setSelectedSessionId] = useState(null); + // State for theme (dark is default) + const [isDarkTheme, setIsDarkTheme] = useState(true); + // Get sample data const sessions = getSampleAgentSessions(); const allSteps = getSampleAgentSteps(); + // Set up theme on component mount + useEffect(() => { + const isDark = setupTheme(); + setIsDarkTheme(isDark); + }, []); + // Set initial selected session if none selected useEffect(() => { if (!selectedSessionId && sessions.length > 0) { @@ -39,8 +69,24 @@ const App = () => { setIsDrawerOpen(false); // Close drawer on selection (mobile) }; + // Toggle theme function + const toggleTheme = () => { + const newIsDark = !isDarkTheme; + setIsDarkTheme(newIsDark); + + // Update document element class + if (newIsDark) { + document.documentElement.classList.add('dark'); + } else { + document.documentElement.classList.remove('dark'); + } + + // Save to localStorage + localStorage.setItem('theme', newIsDark ? 'dark' : 'light'); + }; + return ( -
+
{/* Header */}
@@ -48,16 +94,67 @@ const App = () => { RA-Aid - {/* Mobile drawer toggle - show only on small screens */} -
+
+ {/* Theme toggle button */} + + {/* Mobile drawer toggle - show only on small screens */} +
+ +
@@ -106,6 +203,9 @@ const App = () => { ); }; +// Initialize theme before rendering the app +setupTheme(); + const root = ReactDOM.createRoot(document.getElementById('root')!); root.render(