From 03f2b1670f244036de6aab106e9bf199695d2f9b Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Thu, 15 Jan 2026 16:54:00 -0500
Subject: [PATCH] fix: use inline styles for theme switching instead of relying
 on dark class

---
 src/app/layout.tsx              | 48 ++++++++++++++++++++++++++-------
 src/components/SettingsPage.tsx | 24 ++++++++++++-----
 2 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1974679..07671a0 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -50,28 +50,56 @@ 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;
               
-              if (theme === 'light') {
-                html.classList.remove('dark');
-                html.style.colorScheme = 'light';
-              } else if (theme === 'system') {
-                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                if (prefersDark) {
+              function applyTheme(t) {
+                if (t === 'dark') {
+                  html.classList.add('dark-mode');
                   html.classList.add('dark');
                   html.style.colorScheme = 'dark';
-                } else {
+                  document.body.style.backgroundColor = '#0f172a';
+                  document.body.style.color = '#f1f5f9';
+                } 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');
                 }
-              } else {
-                html.classList.add('dark');
-                html.style.colorScheme = 'dark';
               }
+              
+              applyTheme(theme);
             })();
           `
         }} />
diff --git a/src/components/SettingsPage.tsx b/src/components/SettingsPage.tsx
index f1a4eb4..3146f9c 100644
--- a/src/components/SettingsPage.tsx
+++ b/src/components/SettingsPage.tsx
@@ -25,29 +25,41 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
   }, []);
 
   const handleThemeChange = (newTheme: string) => {
-    console.log('Changing theme to:', newTheme);
-    
     setCurrentTheme(newTheme);
     localStorage.setItem('theme-mode', newTheme);
     
     const html = document.documentElement;
+    const body = document.body;
     
     if (newTheme === 'dark') {
-      html.classList.add('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 = '';
+        }
+      });
       toast.success('🌙 Switched to dark theme');
     } else if (newTheme === 'light') {
-      html.classList.remove('dark');
+      html.classList.remove('dark-mode', 'dark');
       html.style.colorScheme = 'light';
+      body.style.backgroundColor = '#f8fafc';
+      body.style.color = '#1e293b';
       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');
+        html.classList.add('dark-mode', 'dark');
         html.style.colorScheme = 'dark';
+        body.style.backgroundColor = '#0f172a';
+        body.style.color = '#f1f5f9';
       } else {
-        html.classList.remove('dark');
+        html.classList.remove('dark-mode', 'dark');
         html.style.colorScheme = 'light';
+        body.style.backgroundColor = '#f8fafc';
+        body.style.color = '#1e293b';
       }
       toast.success('🔄 Using system preference');
     }