/** * Kleurthema's. * * Een thema bepaalt het **accent**, de dark-mode schakelaar bepaalt de * **ondergrond**. Dat scheelt een compleet tweede palet per thema, en de * bestaande schakelaar blijft doen wat hij deed. * * Per thema: * hoofd de donkere stap van het accent — draagt tekst op een lichte ondergrond * licht de lichte stap — draagt tekst op een donkere ondergrond * chart startkleur van de gradient in de vermogensgrafiek (loopt naar `licht`) * donker / helder: de ondergronden, licht naar het accent toe getint * * Eén stap voor beide modi haalt aan één kant altijd te weinig contrast; daarom * kiest `useTheme` per modus de passende stap als `accentTekst`. * * Wat hier NIET in staat en dat ook niet hoort: GREEN, RED en GOLD uit * `constants/index.js`. Die betekenen iets — winst, verlies en schuld, en de * inleglijn in de grafiek. Betekenis mag niet van een themakeuze afhangen. * Hetzelfde geldt voor de kleuren die de gebruiker zelf aan categorieën en * schuldblokken geeft. */ export const THEMAS = [ { id: "violet", naam: "Violet", hoofd: "#7c3aed", licht: "#a855f7", chart: "#0eddd4", donker: { bg: "#241A39", diep: "#1b1330", card: "#201930", tekst: "#ffffff", sub: "#a0aec0", muted: "#8b8fa8" }, helder: { bg: "#eef1f8", diep: "#e6eaf5", card: "#ffffff", tekst: "#0f172a", sub: "#475569", muted: "#7c8399" }, }, { id: "oceaan", naam: "Oceaan", hoofd: "#0369a1", licht: "#38bdf8", chart: "#22d3ee", donker: { bg: "#11202f", diep: "#0c1826", card: "#16283a", tekst: "#ffffff", sub: "#9fb4c7", muted: "#7e93a6" }, helder: { bg: "#eef3f9", diep: "#e3ebf4", card: "#ffffff", tekst: "#0c1a26", sub: "#41576b", muted: "#748699" }, }, { id: "indigo", naam: "Indigo", hoofd: "#4338ca", licht: "#818cf8", chart: "#67e8f9", donker: { bg: "#1a1c35", diep: "#13152a", card: "#1f2240", tekst: "#ffffff", sub: "#a5abcd", muted: "#868cb0" }, helder: { bg: "#eef0fa", diep: "#e5e8f6", card: "#ffffff", tekst: "#12142b", sub: "#474d75", muted: "#787ea3" }, }, { id: "azuur", naam: "Azuur", hoofd: "#1d4ed8", licht: "#60a5fa", chart: "#7dd3fc", donker: { bg: "#131c33", diep: "#0e1628", card: "#1a2440", tekst: "#ffffff", sub: "#a3b2d4", muted: "#838fb3" }, helder: { bg: "#eef1fb", diep: "#e4e9f7", card: "#ffffff", tekst: "#0d1426", sub: "#42506e", muted: "#737e9c" }, }, { id: "jade", naam: "Jade", // Ligt dicht bij de GREEN die winst betekent: in de KPI-rij staan dan twee // soorten groen naast elkaar. hoofd: "#0f766e", licht: "#2dd4bf", chart: "#5eead4", donker: { bg: "#0f2629", diep: "#0a1c1f", card: "#143035", tekst: "#ffffff", sub: "#9dbdbd", muted: "#7d9d9d" }, helder: { bg: "#edf5f4", diep: "#e2eeed", card: "#ffffff", tekst: "#0b1f21", sub: "#3c5c5c", muted: "#6e8b8b" }, }, { id: "magenta", naam: "Magenta", hoofd: "#a21caf", licht: "#e879f9", chart: "#f5d0fe", donker: { bg: "#2a1130", diep: "#200b26", card: "#331639", tekst: "#ffffff", sub: "#c3a3c9", muted: "#a084a6" }, helder: { bg: "#faeefb", diep: "#f3e2f5", card: "#ffffff", tekst: "#25092a", sub: "#6a4370", muted: "#94709a" }, }, // Roos (#be123c) en Koper (#9a3412) stonden hier ook. Verwijderd: ze botsten // met kleuren die al betekenis dragen — roos met de RED van verlies en schuld, // koper met de gouden inleglijn en het oranje Belastingdienst-blok. { id: "grafiet", naam: "Grafiet", hoofd: "#475569", licht: "#94a3b8", chart: "#cbd5e1", donker: { bg: "#17191f", diep: "#111318", card: "#1e2129", tekst: "#ffffff", sub: "#a8b0bd", muted: "#868e9c" }, helder: { bg: "#f1f2f5", diep: "#e7e9ee", card: "#ffffff", tekst: "#14161a", sub: "#414751", muted: "#737a86" }, }, { id: "papier", naam: "Papier", // Warm van toon en bijna monochroom: het accent doet een stap terug. hoofd: "#3f5570", licht: "#8fa5c0", chart: "#b6c9dc", donker: { bg: "#1c1a17", diep: "#161412", card: "#24211d", tekst: "#f6f2eb", sub: "#b8b0a4", muted: "#948c80" }, helder: { bg: "#f5f1e8", diep: "#ece7db", card: "#fffdf8", tekst: "#1f1c17", sub: "#4d4a43", muted: "#7c766a" }, }, { id: "puur", naam: "Puur", // Zwart of wit, niets ertussenin. Op OLED scheelt de zwarte variant stroom. hoofd: "#6d28d9", licht: "#c4b5fd", chart: "#22d3ee", donker: { bg: "#000000", diep: "#000000", card: "#0e0e12", tekst: "#ffffff", sub: "#d4d4d8", muted: "#a1a1aa" }, helder: { bg: "#f7f7f8", diep: "#efeff1", card: "#ffffff", tekst: "#000000", sub: "#27272a", muted: "#52525b" }, }, ]; export const STANDAARD_THEMA = "violet"; /** Zoekt een thema op id; valt terug op het standaardthema. */ export const zoekThema = (id) => THEMAS.find((t) => t.id === id) ?? THEMAS.find((t) => t.id === STANDAARD_THEMA);