fix: add theme initialization script in head and toast feedback for theme changes

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`}
       >