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>