| import { useCallback, useEffect, useState } from "react"; | |
| export type Theme = "light" | "dark"; | |
| const KEY = "btc-intel.theme"; | |
| /** Light by default, like the reference site. The choice is written to the | |
| * document element so CSS owns every colour and nothing re-renders. */ | |
| export function useTheme(): [Theme, () => void] { | |
| const [theme, setTheme] = useState<Theme>( | |
| () => (document.documentElement.dataset.theme as Theme) || "light", | |
| ); | |
| useEffect(() => { | |
| document.documentElement.dataset.theme = theme; | |
| try { | |
| localStorage.setItem(KEY, theme); | |
| } catch { | |
| /* private window: the choice simply does not persist */ | |
| } | |
| }, [theme]); | |
| return [theme, useCallback(() => setTheme((t) => (t === "dark" ? "light" : "dark")), [])]; | |
| } | |