Bugfixes

2026-09-15 14:02:17 +02:00
parent 750dc69e56
commit 0b67f346e1
19 changed files with 449 additions and 161 deletions
@@ -1,27 +1,68 @@
+import { zoekThema } from "../constants/themas.js";
+
+/** `#rrggbb` (of `#rgb`) → `rgba(r, g, b, alpha)` */
+function metAlpha(hex, alpha) {
+  const h = hex.replace("#", "");
+  const vol = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+  const n = parseInt(vol, 16);
+  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`;
+}
+
 /**
- * Geeft een thema-object (T) terug op basis van darkMode.
- * Wordt gebruikt door alle componenten om consistent kleuren te krijgen.
+ * Geeft een thema-object (T) terug op basis van het gekozen kleurthema en
+ * licht/donker. Wordt gebruikt door alle componenten om consistent kleuren te
+ * krijgen.
+ *
+ * Thema en modus staan los van elkaar: het thema levert het accent, `darkMode`
+ * de ondergrond. De randen, invoervelden en schaduwen worden uit het accent
+ * afgeleid, zodat ze vanzelf meekleuren.
+ *
+ * @param {string}  themaId  id uit `constants/themas.js`
+ * @param {boolean} darkMode
 */
-export function useTheme(darkMode) {
-  const bg   = darkMode ? "#241A39"             : "#eef1f8";
-  const card = darkMode ? "rgba(22,23,27,0.30)" : "#ffffff";
+export function useTheme(themaId, darkMode) {
+  const thema = zoekThema(themaId);
+  const p = darkMode ? thema.donker : thema.helder;
+
+  // Het accent dat tekst draagt is per ondergrond een andere stap van dezelfde
+  // kleur: de lichte op donker, de donkere op licht. Eén stap voor beide haalt
+  // aan één kant altijd te weinig contrast.
+  const accentTekst = darkMode ? thema.licht : thema.hoofd;
+
  return {
-    // Exacte Finex kleuren (dark) / licht alternatief
-    bg,
-    card,
+    bg:   p.bg,
+    card: p.card,
    // Ondoorzichtige achtergrond voor popups/modals: kaartkleur over de pagina-bg.
-    popupBg: `linear-gradient(${card}, ${card}), ${bg}`,
-    sidebar:    darkMode ? "#16171B"                        : "#f8faff",
-    border:     darkMode ? "rgba(139,92,246,0.15)"          : "rgba(0,0,0,0.07)",
-    muted:      darkMode ? "#8b8fa8"                        : "#94a3b8",
-    text:       darkMode ? "#ffffff"                        : "#0f172a",
-    subtext:    darkMode ? "#a0aec0"                        : "#64748b",
-    inputBg:    darkMode ? "rgba(139,92,246,0.08)"          : "#f1f5ff",
-    inputBorder:darkMode ? "rgba(139,92,246,0.2)"           : "#e2e8f0",
-    contentBg:  darkMode ? "#241A39"                        : "#eef1f8",
-    shadow:     darkMode ? "0 4px 24px rgba(124,58,237,0.25)"  : "0 4px 20px rgba(0,0,0,0.07)",
-    cardShadow: darkMode ? "0 4px 20px rgba(124,58,237,0.2)"  : "0 2px 8px rgba(0,0,0,0.06)",
-    radius:     "14px",
-    font:       "'Poppins', system-ui, sans-serif",
+    popupBg: `linear-gradient(${p.card}, ${p.card}), ${p.bg}`,
+    sidebar:     p.diep,
+    border:      darkMode ? metAlpha(thema.licht, 0.15) : "rgba(0,0,0,0.07)",
+    muted:       p.muted,
+    text:        p.tekst,
+    subtext:     p.sub,
+    inputBg:     darkMode ? metAlpha(thema.licht, 0.08) : metAlpha(thema.hoofd, 0.05),
+    inputBorder: darkMode ? metAlpha(thema.licht, 0.2)  : "#e2e8f0",
+    contentBg:   p.bg,
+    shadow:      darkMode ? `0 4px 24px ${metAlpha(thema.hoofd, 0.25)}` : "0 4px 20px rgba(0,0,0,0.07)",
+    cardShadow:  darkMode ? `0 4px 20px ${metAlpha(thema.hoofd, 0.2)}`  : "0 2px 8px rgba(0,0,0,0.06)",
+    radius:      "14px",
+    font:        "'Poppins', system-ui, sans-serif",
+
+    // ── Accenten ──────────────────────────────────────────────────────────────
+    // Componenten die nu nog PURPLE / PURPLE_LIGHT uit constants/index.js
+    // importeren horen hier naartoe: een const op moduleniveau is niet
+    // reactief en kan dus niet met een themakeuze meeveranderen.
+    accent:         thema.hoofd,
+    accentLicht:    thema.licht,
+    accentTekst,
+    accentGradient: `linear-gradient(135deg, ${thema.hoofd}, ${thema.licht})`,
+    // Start- en eindkleur van de vermogenslijn in de grafiek.
+    chartVan: thema.chart,
+    chartTot: thema.licht,
+
+    // Voor componenten die op de modus moeten beslissen. Eerder werd dat gedaan
+    // door T.bg met een vaste hex te vergelijken; met elf thema's kan dat niet meer.
+    darkMode,
+    themaId:   thema.id,
+    themaNaam: thema.naam,
  };
 }