diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a6b9068..efb7789 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -56,30 +56,6 @@ export default function RootLayout({ const theme = localStorage.getItem('theme-mode') || 'dark'; const html = document.documentElement; - function injectStyles(t) { - let style = document.getElementById('theme-override-styles'); - if (!style) { - style = document.createElement('style'); - style.id = 'theme-override-styles'; - document.head.appendChild(style); - } - if (t === 'dark') { - style.textContent = \` - html.dark .min-h-screen, html.dark .bg-gradient-to-b { background: linear-gradient(to bottom, #0f172a, #1e293b) !important; color: #f1f5f9 !important; } - html.dark * { color: #f1f5f9 !important; } - html.dark input, html.dark textarea { background-color: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; } - html.dark button { background-color: #334155 !important; color: #f1f5f9 !important; } - \`; - } else { - style.textContent = \` - html:not(.dark) .min-h-screen, html:not(.dark) .bg-gradient-to-b { background: linear-gradient(to bottom, #f8fafc, #f1f5f9) !important; color: #1e293b !important; } - html:not(.dark) * { color: #1e293b !important; } - html:not(.dark) input, html:not(.dark) textarea { background-color: #e2e8f0 !important; color: #1e293b !important; border-color: #cbd5e1 !important; } - html:not(.dark) button { background-color: #cbd5e1 !important; color: #1e293b !important; } - \`; - } - } - if (theme === 'dark') { html.classList.add('dark'); } else if (theme === 'light') { @@ -87,10 +63,7 @@ export default function RootLayout({ } else if (theme === 'system') { const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches; if (isDark) html.classList.add('dark'); - else html.classList.remove('dark'); } - - injectStyles(html.classList.contains('dark') ? 'dark' : 'light'); })(); ` }} /> diff --git a/src/components/SettingsPage.tsx b/src/components/SettingsPage.tsx index d3b964c..a7ad8bf 100644 --- a/src/components/SettingsPage.tsx +++ b/src/components/SettingsPage.tsx @@ -24,53 +24,6 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) { } }, []); - const injectThemeStyles = (theme: string) => { - let styleId = 'theme-override-styles'; - let styleTag = document.getElementById(styleId) as HTMLStyleElement; - - if (!styleTag) { - styleTag = document.createElement('style'); - styleTag.id = styleId; - document.head.appendChild(styleTag); - } - - if (theme === 'dark') { - styleTag.textContent = ` - html.dark .min-h-screen, html.dark .bg-gradient-to-b { - background: linear-gradient(to bottom, #0f172a, #1e293b) !important; - color: #f1f5f9 !important; - } - html.dark * { color: #f1f5f9 !important; } - html.dark input, html.dark textarea { - background-color: #1e293b !important; - color: #f1f5f9 !important; - border-color: #334155 !important; - } - html.dark button { - background-color: #334155 !important; - color: #f1f5f9 !important; - } - `; - } else if (theme === 'light') { - styleTag.textContent = ` - html:not(.dark) .min-h-screen, html:not(.dark) .bg-gradient-to-b { - background: linear-gradient(to bottom, #f8fafc, #f1f5f9) !important; - color: #1e293b !important; - } - html:not(.dark) * { color: #1e293b !important; } - html:not(.dark) input, html:not(.dark) textarea { - background-color: #e2e8f0 !important; - color: #1e293b !important; - border-color: #cbd5e1 !important; - } - html:not(.dark) button { - background-color: #cbd5e1 !important; - color: #1e293b !important; - } - `; - } - }; - const handleThemeChange = (newTheme: string) => { setCurrentTheme(newTheme); localStorage.setItem('theme-mode', newTheme); @@ -79,20 +32,16 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) { if (newTheme === 'dark') { html.classList.add('dark'); - injectThemeStyles('dark'); toast.success('🌙 Dark theme'); } else if (newTheme === 'light') { html.classList.remove('dark'); - injectThemeStyles('light'); toast.success('☀️ Light theme'); } else if (newTheme === 'system') { const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; if (prefersDark) { html.classList.add('dark'); - injectThemeStyles('dark'); } else { html.classList.remove('dark'); - injectThemeStyles('light'); } toast.success('🔄 System'); }