/* * OTD — Theme CSS variabelen * Dark en light theme via data-theme attribuut op * Uitbreidbaar: voeg extra themes toe als data-theme="sepia" etc. */ /* ── Light Theme (default) ── */ :root, [data-theme="light"] { --color-bg: #f8f9fa; --color-surface: #ffffff; --color-surface-2: #f0f2f5; --color-border: #dee2e6; --color-text: #212529; --color-text-muted: #6c757d; --color-text-inverse: #ffffff; --color-primary: #2563eb; --color-primary-hover:#1d4ed8; --color-primary-light:#dbeafe; --color-success: #16a34a; --color-warning: #d97706; --color-danger: #dc2626; --color-info: #0891b2; --color-nav-bg: #ffffff; --color-nav-border: #e5e7eb; --color-nav-text: #374151; --color-card-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06); --color-card-shadow-hover: 0 4px 12px rgba(0,0,0,.15); --meta-theme-color: #2563eb; } /* ── Dark Theme ── */ [data-theme="dark"] { --color-bg: #0f172a; --color-surface: #1e293b; --color-surface-2: #334155; --color-border: #475569; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-text-inverse: #0f172a; --color-primary: #3b82f6; --color-primary-hover:#60a5fa; --color-primary-light:#1e3a5f; --color-success: #22c55e; --color-warning: #f59e0b; --color-danger: #f87171; --color-info: #22d3ee; --color-nav-bg: #1e293b; --color-nav-border: #334155; --color-nav-text: #e2e8f0; --color-card-shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); --color-card-shadow-hover: 0 4px 12px rgba(0,0,0,.5); --meta-theme-color: #1e293b; } /* ── Transition voor smooth theme switch ── */ *, *::before, *::after { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* Geen transitie op afbeeldingen en SVG */ img, svg { transition: none; }