Bugfixes

2026-09-15 14:02:17 +02:00
parent 750dc69e56
commit 0b67f346e1
19 changed files with 449 additions and 161 deletions
@@ -0,0 +1,92 @@
+/**
+ * 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);