feat: light theme by default with dark toggle, CSS variables, FOUC prevention, theme persistence

components/Header.js

@@ -2,6 +2,7 @@
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { Sparkles, LogOut } from 'lucide-react';
+import ThemeToggle from './ThemeToggle';
 
 export default function Header({ user }) {
   const router = useRouter();
@@ -16,8 +17,9 @@ export default function Header({ user }) {
           <Sparkles className="w-5 h-5 text-accent" />
           <span className="font-bold">ZeroPost</span>
         </Link>
-        <div className="flex items-center gap-3">
-          <span className="text-sm text-gray-500 hidden sm:inline">{user?.email}</span>
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-gray-500 hidden sm:inline mr-2">{user?.email}</span>
+          <ThemeToggle />
           <button onClick={logout} className="btn-ghost p-2" title="Выйти">
             <LogOut className="w-4 h-4" />
           </button>

components/ThemeToggle.js

@@ -0,0 +1,34 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { Sun, Moon } from 'lucide-react';
+
+export default function ThemeToggle() {
+  const [theme, setTheme] = useState(null);
+
+  useEffect(() => {
+    const saved = typeof window !== 'undefined' && localStorage.getItem('zp_theme');
+    const current = saved || 'light';
+    setTheme(current);
+    document.documentElement.setAttribute('data-theme', current);
+  }, []);
+
+  function toggle() {
+    const next = theme === 'dark' ? 'light' : 'dark';
+    setTheme(next);
+    document.documentElement.setAttribute('data-theme', next);
+    localStorage.setItem('zp_theme', next);
+  }
+
+  // На SSR не рендерим (избегаем mismatch)
+  if (!theme) return <div className="w-9 h-9" />;
+
+  return (
+    <button
+      onClick={toggle}
+      title={theme === 'dark' ? 'Светлая тема' : 'Тёмная тема'}
+      className="w-9 h-9 inline-flex items-center justify-center rounded-lg hover:bg-surface2 transition-colors"
+    >
+      {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+    </button>
+  );
+}