refactor: remove theme switching, keep dark mode permanent

src/app/layout.tsx

@@ -48,30 +48,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning={true}>
+    <html lang="en" className="dark" suppressHydrationWarning={true}>
       <head>
-        <script dangerouslySetInnerHTML={{
-          __html: `
-            (function() {
-              const theme = localStorage.getItem('theme-mode') || 'dark';
-              const html = document.documentElement;
-              
-              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');
-                }
-              }
-            })();
-          `
-        }} />
-      </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >

src/components/SettingsPage.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { useAuth } from '@/context/AuthContext';
-import toast from 'react-hot-toast';
 
 interface SettingsPageProps {
   userEmail?: string;
@@ -11,90 +10,33 @@ interface SettingsPageProps {
 export default function SettingsPage({ userEmail }: SettingsPageProps) {
   const { logout } = useAuth();
   const [showConfirm, setShowConfirm] = useState(false);
-  const [currentTheme, setCurrentTheme] = useState<string>('dark');
-
-  useEffect(() => {
-    // Get the current theme from localStorage or HTML class
-    const stored = localStorage.getItem('theme-mode');
-    if (stored) {
-      setCurrentTheme(stored);
-    } else {
-      const isDark = document.documentElement.classList.contains('dark');
-      setCurrentTheme(isDark ? 'dark' : 'light');
-    }
-  }, []);
-
-  const handleThemeChange = (newTheme: string) => {
-    setCurrentTheme(newTheme);
-    localStorage.setItem('theme-mode', newTheme);
-    
-    toast.success('🔄 Applying theme...');
-    setTimeout(() => {
-      window.location.reload();
-    }, 800);
-  };
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 p-4 pb-32 pt-8">
+    <div className="min-h-screen bg-gradient-to-b from-slate-900 to-slate-800 p-4 pb-32 pt-8">
       <div className="max-w-md mx-auto">
         {/* Header */}
         <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold text-slate-900 dark:text-white mb-2">
+          <h1 className="text-4xl font-bold text-white mb-2">Settings</h1>
-            Settings
+          <p className="text-slate-400">Manage your account</p>
-          </h1>
-          <p className="text-slate-600 dark:text-slate-400">
-            Manage your preferences and account
-          </p>
         </div>
 
         {/* Settings Card */}
-        <div className="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-4 space-y-6">
+        <div className="bg-slate-800 rounded-lg shadow-sm p-4 space-y-6">
           {/* Account Section */}
-          <div className="border-b border-slate-200 dark:border-slate-700 pb-6">
+          <div className="border-b border-slate-700 pb-6">
-            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
+            <h2 className="text-lg font-semibold text-white mb-4">Account</h2>
-              Account
-            </h2>
             <div className="space-y-3">
               <div>
-                <p className="text-sm font-medium text-slate-600 dark:text-slate-400">Email</p>
+                <p className="text-sm font-medium text-slate-400">Email</p>
-                <p className="text-slate-900 dark:text-white">{userEmail || 'Not set'}</p>
+                <p className="text-white">{userEmail || 'Not set'}</p>
-              </div>
-            </div>
-          </div>
-
-          {/* Appearance Section */}
-          <div className="border-b border-slate-200 dark:border-slate-700 pb-6">
-            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
-              Appearance
-            </h2>
-            <div className="space-y-3">
-              <p className="text-sm font-medium text-slate-600 dark:text-slate-400 mb-2">
-                Theme
-              </p>
-              <div className="grid grid-cols-3 gap-2">
-                {['light', 'dark', 'system'].map(t => (
-                  <button
-                    key={t}
-                    onClick={() => handleThemeChange(t)}
-                    className={`px-4 py-2 rounded-lg font-medium transition-colors capitalize ${
-                      currentTheme === t
-                        ? 'bg-blue-600 text-white'
-                        : 'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white hover:bg-slate-200 dark:hover:bg-slate-600'
-                    }`}
-                  >
-                    {t === 'system' ? 'Auto' : t}
-                  </button>
-                ))}
               </div>
             </div>
           </div>
 
           {/* About Section */}
-          <div className="border-b border-slate-200 dark:border-slate-700 pb-6">
+          <div className="border-b border-slate-700 pb-6">
-            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
+            <h2 className="text-lg font-semibold text-white mb-4">About</h2>
-              About
+            <div className="space-y-2 text-sm text-slate-400">
-            </h2>
-            <div className="space-y-2 text-sm text-slate-600 dark:text-slate-400">
               <p>Prayer Journal v1.0</p>
               <p>A simple, private space for your daily prayers and reflections.</p>
             </div>
@@ -114,17 +56,13 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
         {/* Logout Confirmation Modal */}
         {showConfirm && (
           <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-            <div className="bg-white dark:bg-slate-800 rounded-xl p-6 max-w-sm w-full">
+            <div className="bg-slate-800 rounded-xl p-6 max-w-sm w-full">
-              <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-2">
+              <h2 className="text-xl font-bold text-white mb-2">Logout?</h2>
-                Logout?
+              <p className="text-slate-400 mb-6">Are you sure you want to logout?</p>
-              </h2>
-              <p className="text-slate-600 dark:text-slate-400 mb-6">
-                Are you sure you want to logout?
-              </p>
               <div className="flex gap-3">
                 <button
                   onClick={() => setShowConfirm(false)}
-                  className="flex-1 px-4 py-2 rounded-lg bg-slate-200 dark:bg-slate-700 text-slate-900 dark:text-white font-medium hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors"
+                  className="flex-1 px-4 py-2 rounded-lg bg-slate-700 text-white font-medium hover:bg-slate-600 transition-colors"
                 >
                   Cancel
                 </button>