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

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>
+  );
+}