'use client' import { useEffect, useState } from 'react' import { useLang } from '@/lib/useLang' import styles from './topbar.module.css' type Theme = 'dark' | 'light' /** Switches between the dark (default) and light theme; the choice is remembered in this browser. */ export default function ThemeToggle() { const [theme, setTheme] = useState('dark') const lang = useLang() // The page starts dark; a small script in applies a stored "light" choice before the first paint. useEffect(() => { setTheme(document.documentElement.dataset.theme === 'light' ? 'light' : 'dark') }, []) const toggle = () => { const next: Theme = theme === 'dark' ? 'light' : 'dark' document.documentElement.dataset.theme = next try { localStorage.setItem('theme', next) } catch { // Storage can be blocked; the theme still switches for this visit. } setTheme(next) } return ( ) }