diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ddf980b..1974679 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -23,6 +23,25 @@ export const metadata: Metadata = { }, }; +// Add global CSS variable definitions +const themeStylesheet = ` + :root { + --bg-primary: #f8fafc; + --bg-secondary: #f1f5f9; + --text-primary: #1e293b; + --text-secondary: #64748b; + --border-color: #e2e8f0; + } + + html.dark { + --bg-primary: #0f172a; + --bg-secondary: #1e293b; + --text-primary: #f1f5f9; + --text-secondary: #cbd5e1; + --border-color: #334155; + } +`; + export default function RootLayout({ children, }: Readonly<{ diff --git a/src/components/SettingsPage.tsx b/src/components/SettingsPage.tsx index 4d84bc6..f1a4eb4 100644 --- a/src/components/SettingsPage.tsx +++ b/src/components/SettingsPage.tsx @@ -26,7 +26,6 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) { const handleThemeChange = (newTheme: string) => { console.log('Changing theme to:', newTheme); - toast.success(`Theme changed to ${newTheme}`); setCurrentTheme(newTheme); localStorage.setItem('theme-mode', newTheme); @@ -36,9 +35,11 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) { if (newTheme === 'dark') { html.classList.add('dark'); html.style.colorScheme = 'dark'; + toast.success('🌙 Switched to dark theme'); } else if (newTheme === 'light') { html.classList.remove('dark'); html.style.colorScheme = 'light'; + toast.success('☀️ Switched to light theme'); } else if (newTheme === 'system') { const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; if (prefersDark) { @@ -48,12 +49,8 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) { html.classList.remove('dark'); html.style.colorScheme = 'light'; } + toast.success('🔄 Using system preference'); } - - // Force page reload to apply theme - setTimeout(() => { - window.location.reload(); - }, 500); }; return (