From af03bf4dc8d5df51b4cfddc67aa63277798aaa92 Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Thu, 15 Jan 2026 16:55:30 -0500
Subject: [PATCH] fix: inject global CSS override styles for theme switching

---
 src/app/layout.tsx              | 66 +++++++++++++-----------------
 src/components/SettingsPage.tsx | 72 +++++++++++++++++++++++----------
 2 files changed, 77 insertions(+), 61 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 07671a0..6259715 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -50,56 +50,44 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning={true}>
       <head>
-        <style>{`
-          :root {
-            --bg-primary: #f8fafc;
-            --bg-secondary: #f1f5f9;
-            --text-primary: #1e293b;
-            --text-secondary: #64748b;
-            --border: #e2e8f0;
-          }
-          
-          html.dark-mode {
-            --bg-primary: #0f172a;
-            --bg-secondary: #1e293b;
-            --text-primary: #f1f5f9;
-            --text-secondary: #cbd5e1;
-            --border: #334155;
-            background-color: #0f172a !important;
-            color: #f1f5f9 !important;
-          }
-          
-          html {
-            background-color: #f8fafc;
-            color: #1e293b;
-          }
-        `}</style>
         <script dangerouslySetInnerHTML={{
           __html: `
             (function() {
               const theme = localStorage.getItem('theme-mode') || 'dark';
               const html = document.documentElement;
               
-              function applyTheme(t) {
+              function injectThemeStyles(t) {
+                let styleTag = document.getElementById('theme-override-styles');
+                if (!styleTag) {
+                  styleTag = document.createElement('style');
+                  styleTag.id = 'theme-override-styles';
+                  document.head.appendChild(styleTag);
+                }
+                
                 if (t === 'dark') {
-                  html.classList.add('dark-mode');
-                  html.classList.add('dark');
-                  html.style.colorScheme = 'dark';
-                  document.body.style.backgroundColor = '#0f172a';
-                  document.body.style.color = '#f1f5f9';
+                  styleTag.textContent = \`
+                    * { color-scheme: dark !important; }
+                    html, body { background-color: #0f172a !important; color: #f1f5f9 !important; }
+                    .bg-gradient-to-b { background: linear-gradient(to bottom, #0f172a, #1e293b) !important; }
+                    div, section, main { background-color: inherit !important; }
+                    p, span, h1, h2, h3, h4, h5, h6 { color: #f1f5f9 !important; }
+                    input, textarea, button { background-color: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; }
+                  \`;
                 } else if (t === 'light') {
-                  html.classList.remove('dark-mode');
-                  html.classList.remove('dark');
-                  html.style.colorScheme = 'light';
-                  document.body.style.backgroundColor = '#f8fafc';
-                  document.body.style.color = '#1e293b';
-                } else if (t === 'system') {
-                  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                  applyTheme(prefersDark ? 'dark' : 'light');
+                  styleTag.textContent = \`
+                    * { color-scheme: light !important; }
+                    html, body { background-color: #f8fafc !important; color: #1e293b !important; }
+                    .bg-gradient-to-b { background: linear-gradient(to bottom, #f8fafc, #f1f5f9) !important; }
+                    div, section, main { background-color: inherit !important; }
+                    p, span, h1, h2, h3, h4, h5, h6 { color: #1e293b !important; }
+                    input, textarea, button { background-color: #e2e8f0 !important; color: #1e293b !important; border-color: #cbd5e1 !important; }
+                  \`;
                 }
               }
               
-              applyTheme(theme);
+              html.classList.add(theme);
+              html.setAttribute('data-theme', theme);
+              injectThemeStyles(theme);
             })();
           `
         }} />
diff --git a/src/components/SettingsPage.tsx b/src/components/SettingsPage.tsx
index 3146f9c..051b278 100644
--- a/src/components/SettingsPage.tsx
+++ b/src/components/SettingsPage.tsx
@@ -24,42 +24,70 @@ 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;
+      styleTag.setAttribute('data-theme-injected', 'true');
+      document.head.appendChild(styleTag);
+    }
+
+    if (theme === 'dark') {
+      styleTag.textContent = `
+        * { color-scheme: dark !important; }
+        html, body { background-color: #0f172a !important; color: #f1f5f9 !important; }
+        .dark\\:from-slate-900, .from-slate-50, .from-slate-100 { background-color: #0f172a !important; }
+        .dark\\:to-slate-800, .to-slate-100 { background-color: #1e293b !important; }
+        div, section, main { background-color: inherit !important; }
+        p, span, h1, h2, h3, h4, h5, h6 { color: #f1f5f9 !important; }
+        input, textarea, button { background-color: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; }
+        button { background-color: #334155 !important; color: #f1f5f9 !important; }
+        button:hover { background-color: #475569 !important; }
+      `;
+    } else if (theme === 'light') {
+      styleTag.textContent = `
+        * { color-scheme: light !important; }
+        html, body { background-color: #f8fafc !important; color: #1e293b !important; }
+        .from-slate-50, .from-slate-100, .dark\\:from-slate-900 { background-color: #f8fafc !important; }
+        .to-slate-100, .dark\\:to-slate-800 { background-color: #f1f5f9 !important; }
+        div, section, main { background-color: inherit !important; }
+        p, span, h1, h2, h3, h4, h5, h6 { color: #1e293b !important; }
+        input, textarea, button { background-color: #e2e8f0 !important; color: #1e293b !important; border-color: #cbd5e1 !important; }
+        button { background-color: #cbd5e1 !important; color: #1e293b !important; }
+        button:hover { background-color: #bfdbfe !important; }
+      `;
+    }
+  };
+
   const handleThemeChange = (newTheme: string) => {
     setCurrentTheme(newTheme);
     localStorage.setItem('theme-mode', newTheme);
     
     const html = document.documentElement;
-    const body = document.body;
     
     if (newTheme === 'dark') {
-      html.classList.add('dark-mode', 'dark');
-      html.style.colorScheme = 'dark';
-      body.style.backgroundColor = '#0f172a';
-      body.style.color = '#f1f5f9';
-      document.querySelectorAll('[class*="bg-"]').forEach(el => {
-        if (el.classList.toString().includes('bg-slate') || el.classList.toString().includes('bg-white')) {
-          el.style.backgroundColor = '';
-        }
-      });
+      html.classList.add('dark');
+      html.setAttribute('data-theme', 'dark');
+      injectThemeStyles('dark');
       toast.success('🌙 Switched to dark theme');
     } else if (newTheme === 'light') {
-      html.classList.remove('dark-mode', 'dark');
-      html.style.colorScheme = 'light';
-      body.style.backgroundColor = '#f8fafc';
-      body.style.color = '#1e293b';
+      html.classList.remove('dark');
+      html.setAttribute('data-theme', 'light');
+      injectThemeStyles('light');
       toast.success('☀️ Switched to light theme');
     } else if (newTheme === 'system') {
       const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
       if (prefersDark) {
-        html.classList.add('dark-mode', 'dark');
-        html.style.colorScheme = 'dark';
-        body.style.backgroundColor = '#0f172a';
-        body.style.color = '#f1f5f9';
+        html.classList.add('dark');
+        html.setAttribute('data-theme', 'dark');
+        injectThemeStyles('dark');
       } else {
-        html.classList.remove('dark-mode', 'dark');
-        html.style.colorScheme = 'light';
-        body.style.backgroundColor = '#f8fafc';
-        body.style.color = '#1e293b';
+        html.classList.remove('dark');
+        html.setAttribute('data-theme', 'light');
+        injectThemeStyles('light');
       }
       toast.success('🔄 Using system preference');
     }