"use client" import { useEffect, useRef, useState } from "react" import { Palette } from "lucide-react" const STORAGE_KEY = "valabel-colors" const VARS = [ { key: "bg", label: "Fond", cssVar: "--bg" }, { key: "text", label: "Texte", cssVar: "--text" }, { key: "accent", label: "Accent", cssVar: "--accent" }, ] as const type ColorKey = (typeof VARS)[number]["key"] type ColorState = Partial> function readStored(): ColorState { try { const raw = localStorage.getItem(STORAGE_KEY) return raw ? (JSON.parse(raw) as ColorState) : {} } catch { return {} } } function applyColors(colors: ColorState) { const root = document.documentElement for (const { key, cssVar } of VARS) { const v = colors[key] if (v) root.style.setProperty(cssVar, v) else root.style.removeProperty(cssVar) } } function readDefaults(): ColorState { if (typeof document === "undefined") return {} const computed = getComputedStyle(document.documentElement) const d: ColorState = {} for (const { key, cssVar } of VARS) { d[key] = computed.getPropertyValue(cssVar).trim() || "#000000" } return d } // Les 3 couleurs de marque (fond, texte, accent) — personnalisables et // mémorisées en localStorage. Un override inline sur prime sur le // thème clair/sombre, quel que soit celui-ci. export function ColorPickerToggle({ className }: { className?: string }) { const [open, setOpen] = useState(false) const [colors, setColors] = useState(() => typeof window === "undefined" ? {} : readStored() ) const [defaults] = useState(readDefaults) const popRef = useRef(null) useEffect(() => { function onClickOutside(e: MouseEvent) { if (popRef.current && !popRef.current.contains(e.target as Node)) setOpen(false) } if (open) document.addEventListener("mousedown", onClickOutside) return () => document.removeEventListener("mousedown", onClickOutside) }, [open]) function update(key: ColorKey, value: string) { const next = { ...colors, [key]: value } setColors(next) applyColors(next) localStorage.setItem(STORAGE_KEY, JSON.stringify(next)) } function reset() { setColors({}) applyColors({}) localStorage.removeItem(STORAGE_KEY) } return (
{open && (

Couleurs du site

{VARS.map((v) => ( ))}
)}
) }