// Settings panel — reuses the About side-panel chrome. Theme section only (v1f). // Theme persisted in localStorage "rd:theme" and applied as data-theme on . const { useState: useStateSet, useEffect: useEffectSet } = React; const THEMES = [ { id: "linen", name: "Linen", note: "Warm off-white, deep teal", sw: ["#F7F5EE", "#F2EFE6", "#1B1F1D", "#2F6661"] }, { id: "slate", name: "Slate", note: "Cool grey, muted indigo", sw: ["#F4F5F7", "#E9EBEF", "#1A1C20", "#4A5BA6"] }, { id: "paper", name: "Paper", note: "Pure white, terracotta", sw: ["#FFFFFF", "#F7F7F7", "#2B2520", "#B85C38"] }, { id: "dusk", name: "Dusk", note: "Warm-to-cool gradient, plum", sw: ["#F6F1EE", "#E4E8F2", "#2A2530", "#6B4E7A"], gradient: "linear-gradient(160deg, #F6F1EE 0%, #ECE6F0 55%, #E4E8F2 100%)" }, { id: "tide", name: "Tide", note: "Sea-glass gradient, deep sea", sw: ["#EEF6F5", "#E9EEF8", "#1F2B2E", "#2E6E73"], gradient: "linear-gradient(160deg, #EEF6F5 0%, #E6F0F3 50%, #E9EEF8 100%)" }, { id: "night", name: "Night", note: "Dark, sage", sw: ["#16181C", "#1E2126", "#E8E6E1", "#7FA88F"] }, ]; const THEME_KEY = "rd:theme"; function readTheme() { try { const t = localStorage.getItem(THEME_KEY); return THEMES.some(x => x.id === t) ? t : "linen"; } catch { return "linen"; } } function applyTheme(id) { if (id === "linen") document.documentElement.removeAttribute("data-theme"); else document.documentElement.setAttribute("data-theme", id); } // Apply immediately on script load so there's no flash. applyTheme(readTheme()); function SettingsPanel({ open, onClose }) { const [theme, setTheme] = useStateSet(readTheme); useEffectSet(() => { applyTheme(theme); try { localStorage.setItem(THEME_KEY, theme); } catch {} }, [theme]); useEffectSet(() => { if (!open) return; function onKey(e) { if (e.key === "Escape") onClose(); } document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [open, onClose]); return ( <>