diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6259715..a6b9068 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -56,38 +56,41 @@ export default function RootLayout({
               const theme = localStorage.getItem('theme-mode') || 'dark';
               const html = document.documentElement;
               
-              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);
+              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') {
-                  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; }
+                  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 if (t === '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; }
+                } 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; }
                   \`;
                 }
               }
               
-              html.classList.add(theme);
-              html.setAttribute('data-theme', theme);
-              injectThemeStyles(theme);
+              if (theme === 'dark') {
+                html.classList.add('dark');
+              } else if (theme === 'light') {
+                html.classList.remove('dark');
+              } 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 051b278..d3b964c 100644
--- a/src/components/SettingsPage.tsx
+++ b/src/components/SettingsPage.tsx
@@ -31,33 +31,42 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
     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; }
+        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 = `
-        * { 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; }
+        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;
+        }
       `;
     }
   };
@@ -70,26 +79,22 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
     
     if (newTheme === 'dark') {
       html.classList.add('dark');
-      html.setAttribute('data-theme', 'dark');
       injectThemeStyles('dark');
-      toast.success('🌙 Switched to dark theme');
+      toast.success('🌙 Dark theme');
     } else if (newTheme === 'light') {
       html.classList.remove('dark');
-      html.setAttribute('data-theme', 'light');
       injectThemeStyles('light');
-      toast.success('☀️ Switched to light theme');
+      toast.success('☀️ Light theme');
     } else if (newTheme === 'system') {
       const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
       if (prefersDark) {
         html.classList.add('dark');
-        html.setAttribute('data-theme', 'dark');
         injectThemeStyles('dark');
       } else {
         html.classList.remove('dark');
-        html.setAttribute('data-theme', 'light');
         injectThemeStyles('light');
       }
-      toast.success('🔄 Using system preference');
+      toast.success('🔄 System');
     }
   };