69 lines
2.9 KiB
JavaScript
69 lines
2.9 KiB
JavaScript
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 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(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 {
|
|
bg: p.bg,
|
|
card: p.card,
|
|
// Ondoorzichtige achtergrond voor popups/modals: kaartkleur over de pagina-bg.
|
|
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,
|
|
};
|
|
}
|