From 58480cd630b37818eccf425ab95b855fed22a554 Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Thu, 15 Jan 2026 16:33:21 -0500
Subject: [PATCH] fix: add theme initialization script in head and toast
 feedback for theme changes

---
 src/app/layout.tsx              | 27 +++++++++++++++++++++++++++
 src/components/SettingsPage.tsx | 13 ++++++++-----
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d95055c..ddf980b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -30,6 +30,33 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning={true}>
+      <head>
+        <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) {
+                  html.classList.add('dark');
+                  html.style.colorScheme = 'dark';
+                } else {
+                  html.classList.remove('dark');
+                  html.style.colorScheme = 'light';
+                }
+              } else {
+                html.classList.add('dark');
+                html.style.colorScheme = 'dark';
+              }
+            })();
+          `
+        }} />
+      </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
diff --git a/src/components/SettingsPage.tsx b/src/components/SettingsPage.tsx
index 384718f..55e0f7b 100644
--- a/src/components/SettingsPage.tsx
+++ b/src/components/SettingsPage.tsx
@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { useAuth } from '@/context/AuthContext';
+import toast from 'react-hot-toast';
 
 interface SettingsPageProps {
   userEmail?: string;
@@ -24,6 +25,9 @@ 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);
     
@@ -31,19 +35,18 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
     
     if (newTheme === 'dark') {
       html.classList.add('dark');
-      document.documentElement.style.colorScheme = 'dark';
+      html.style.colorScheme = 'dark';
     } else if (newTheme === 'light') {
       html.classList.remove('dark');
-      document.documentElement.style.colorScheme = 'light';
+      html.style.colorScheme = 'light';
     } else if (newTheme === 'system') {
-      // Use system preference
       const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
       if (prefersDark) {
         html.classList.add('dark');
-        document.documentElement.style.colorScheme = 'dark';
+        html.style.colorScheme = 'dark';
       } else {
         html.classList.remove('dark');
-        document.documentElement.style.colorScheme = 'light';
+        html.style.colorScheme = 'light';
       }
     }
   };