10 Lichte Paletten voor een dagmodus.
Kan een website een dag- en nachtmodus krijgen? Jazeker. Maar in plaats van een steriel kantoorwit (#FFFFFF) met hard zwart, putten we hier uit de Japanse kleurentraditie van kunstenaar en Oscar-winnaar Sanzo Wada (1930s). De subtiele washi-ivoor, theeblad-, kalk- en zandsteentinten vormen een warme, redactionele achtergrond voor jouw typografie (Space Grotesk & Instrument Serif) en informatiedesign bij het PBL.
Hoe werkt Dag & Nachtmodus op je site?
Moderne websites wisselen niet van HTML-structuur, maar passen enkel hun centrale CSS-variabelen aan. Hierdoor blijft je code superlicht, snel en gemakkelijk te onderhouden.
CSS Custom Properties
Koppelt kleuren als --brand-bg en --brand-text los van de elementen. Je verandert alleen de waardes op de :root of [data-theme="light"].
Automatisch via OS
Via de CSS media query @media (prefers-color-scheme: light) sluit je site automatisch aan op de donkere of lichte modus van de bezoeker.
Zon / Maan Schakelaar
Een subtiel ☀️/🌙 knopje in je header waarmee bezoekers handmatig kunnen kiezen wat ze fijner vinden lezen.
Onthoud met LocalStorage
De keuze wordt lokaal in de browser bewaard, zodat bij een herhaald bezoek de favoriete modus direct actief is.
Filip de Blois
Making complex information clear.
As an information designer at the PBL Netherlands Environmental Assessment Agency, I translate complex science and policy-related subjects into clear visualisations.
Focus & Project Cards
PBL Netherlands Environmental Assessment Agency
Translating complex climate, spatial, and environmental research into clear, high-impact data visualisations for national policymakers.
Visit pbl.nl ↗
Information Design Conference
Co-organiser of the annual conference uniting information designers, journalists, researchers, and visual communicators worldwide.
Visit IDC ↗
Photography
Exploring light, timing, and atmosphere through low-light, sports, portraits, and astrophotography. Refining a keen eye beyond the grid.
Instagram @filipdeblois ↗10 Haishoku Sōkan Kleurenopties
Selecteer een van de onderstaande paletten om het live in het bovenstaande canvas te zien. Klik op een hex-code om deze direct naar je klembord te kopiëren.
Hoe voeg je de Dagmodus toe aan je index.html?
Plaats deze regels in je style.css (of in het <style> blok in index.html). Wanneer je een ☀️/🌙 schakelaar toevoegt die data-theme="light" op de <html> tag zet, transformeert je hele site soepel naar de gekozen dagmodus:
/* 1. Standaard Donkere Modus (Je huidige vertrouwde palet) */
:root {
--brand-bg: #2F3330;
--brand-bg-deep: #242825;
--brand-accent: #D4FF00;
--brand-text: #F4F4F0;
--brand-muted: #A3A8A4;
--brand-border: rgba(255, 255, 255, 0.12);
}
/* 2. Lichte Dagmodus (Gekozen uit Haishoku Sōkan) */
[data-theme="light"] {
--brand-bg: #F6F5EE; /* Washi papier / lichte canvas */
--brand-bg-deep: #EDECE4; /* Subtiele onderlaag voor footer */
--brand-accent: #829C00; /* Karaktervol accent met > 4.5:1 contrast */
--brand-text: #1F2421; /* Diepe sumi koolstof inkt */
--brand-muted: #69716B; /* Zacht leisteen voor secundaire tekst */
--brand-border: rgba(31, 36, 33, 0.12);
}
/* 3. Vloeiende overgang tussen dag en nacht */
body, header, footer, .photo-container-square, .fullbleed-card-square {
transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}