Dark mode MKB-website — wel of niet?

Wat MKB moet weten

Voor tech-savvy doelgroepen (developers, designers, SaaS-gebruikers): ja, vaak gewenst. Voor brede MKB-doelgroepen (50+, retail, vakman): liever niet — light mode is de default-verwachting. Compromis: respect prefers-color-scheme — toon donker thema alleen aan bezoekers die het zelf in hun OS hebben aangezet. Dat is 18-22% van het verkeer in 2026.

Veelgestelde vragen

Waarom dark mode überhaupt bestaat

Dark mode is begonnen als developer-tool. Code-editors hadden vanaf de eerste dag donkere thema's omdat een wit scherm met witte spaties extra zichtbaar was bij lang werken. Apple en Google brachten in 2018 en 2019 systeembrede dark mode naar respectievelijk macOS en Android, en in een paar jaar tijd werd het een productverwachting. Wat begon als comfort-feature is voor sommige doelgroepen onmisbaar geworden, voor anderen blijft het irrelevant.

De drie redenen waarom mensen dark mode kiezen: minder oogvermoeidheid bij lange schermtijd in donkere kamers, batterijwinst op OLED-schermen omdat zwart letterlijk pixels uitschakelt, en esthetische voorkeur omdat donkere interfaces kalmer overkomen. Geen van deze drie geldt voor de bezoeker die overdag op kantoor 30 seconden op je website is om een telefoonnummer op te zoeken. Voor die context is light mode op een normaal LCD-scherm leesbaarder.

De vraag voor een MKB-site is dus niet of dark mode mooi is, maar of jouw bezoekers in een context zitten waarin dark mode hen helpt. Dat is bij ongeveer een vijfde van het Nederlandse webverkeer het geval — en dat zijn vooral mensen die al systeembreed dark mode hebben aangezet. Voor die groep moet je site werken. Voor de rest niet.

De technische implementatie van dark mode

De juiste manier om dark mode te implementeren is via CSS custom properties en een prefers-color-scheme media-query. Je definieert in :root je light-tokens (background, foreground, primary, muted, border) en je overschrijft ze binnen @media (prefers-color-scheme: dark). Componenten verwijzen alleen naar de tokens en weten niets van light of dark. Dat scheelt enorm in onderhoud.

De anti-pattern is per component twee classes maken (een light en een dark) en die handmatig switchen. Daarmee verdubbel je je CSS-volume en bij elke nieuwe component vergeet je een variant. Verder is een manual toggle in de UI vaak overbodig: de meeste bezoekers verwachten dat de site hun OS-instelling volgt. Een toggle voeg je alleen toe als je weet dat een significant deel afwijkt van hun systeemvoorkeur, bijvoorbeeld op developer-tools.

Een derde detail: kleurpaletten zijn niet zomaar inverteerbaar. Een knal-gele knop op wit werkt visueel anders dan dezelfde geel op zwart — vaak te fel en chromatic-aberration-achtig. Dark-mode-paletten gebruiken meestal iets meer verzadigde basis-kleuren maar minder felle accent-kleuren, en achtergronden zijn zelden pure zwart (#000) maar bijna-zwart (#0E0F12 ofzo) om contrast-randen te verzachten.

Contrast en leesbaarheid in dark mode

WCAG-contrast geldt in beide modes en is in dark mode soms juist moeilijker te halen. Donker grijs op zwart is verleidelijk maar voldoet zelden. Vuistregel: gebruik in dark mode foreground-kleuren met een luminance tussen 85 en 95 procent in plaats van pure wit, want pure wit op zwart creëert "halation" — een waas die de leesbaarheid verlaagt. Voor body-tekst is een lichtgrijs van #E8E8EC op een achtergrond van #0E0F12 prettig leesbaar en haalt ruim 4.5:1 contrast.

• Implementeer dark mode via CSS custom properties, niet via dubbele classes
• Respecteer prefers-color-scheme als default
• Voeg alleen een manual toggle toe als je doelgroep ervan afwijkt
• Vermijd pure zwart (#000) als achtergrond, gebruik #0E0F12 of #14161A
• Vermijd pure wit (#FFFFFF) als tekstkleur, gebruik #E8E8EC of #F2F2F4
• Verlaag accent-kleur-verzadiging met circa 10 procent in dark mode
• Test alle formulieren in beide modes — input-states gaan vaak fout
• Test alle plaatjes en logo's — een logo met zwarte tekst is onleesbaar op donker
• Maak SVG-iconen currentColor zodat ze automatisch meeschalen
• Zet color-scheme: light dark in CSS zodat browser-UI ook meegaat
• Voorkom flash-of-light-content door dark-class voor render te zetten
• Test contrast met WebAIM-tool — minimaal 4.5:1 voor body-tekst
• Vermijd gradienten van wit naar zwart die in dark mode raar omkeren
• Check video-thumbnails, screenshots en charts — die zijn vaak light-mode-only
• Document de twee paletten in een style-guide of design-tokens-bestand

Sector-keuzes: voor wie wel, voor wie niet

Voor een SaaS-product, een developer-tool, een fintech-app of een AI-platform is dark mode bijna verplicht. Je bezoekers verwachten het en je concurrenten hebben het. Voor een lokale hovenier, een bakker, een fysio of een verzekeringsadviseur is dark mode niet nodig en levert het geen meetbare conversie-winst. De build-kosten lopen tussen 4 en 12 uur extra werk afhankelijk van site-grootte, en die uren zijn waardevoller besteed aan SEO of content.

Een interessante middencategorie zijn premium retail, design-studio's en culturele instellingen. Daar kan een dark-modus-keuze deel zijn van het merk-statement. Een fotograaf die wil dat zijn werk in donker-prachtig-kontrast op het scherm verschijnt, kan beter een single-dark-design kiezen dan een toggle: dan is dark de signature en hoef je nooit twee modes te onderhouden. Keurmeesters bijvoorbeeld is bewust light-only gehouden omdat hun bezoekers (huiseigenaren tussen 35 en 70) overwegend op laptops in normale binnenverlichting werken — een toggle had complexiteit toegevoegd zonder waarde.

Wat doe je vandaag?

• Check je analytics op het percentage bezoekers met dark-mode-systeem-voorkeur via een prefers-color-scheme-tracker
• Open je huidige site in een browser met dark mode aan en bekijk wat er stuk gaat
• Beslis bewust: light-only, single-dark, of beide modes met OS-detectie
• Als je voor beide modes gaat: refactor je kleuren naar CSS custom properties
• Vraag een gratis audit aan voor advies of dark mode voor jouw doelgroep loont

Verder lezen