Darkmode voor je site in 10 minuten

CSS voor de nacht of dag mode.

@media (prefers-color-scheme: dark) {
// CSS code voor  de donkere modus
}
@media (prefers-color-scheme: light) {
// CSS code voor  de lichte modus
}

De media query prefers-color-scheme zorgt ervoor dat de website automatisch de CSS inschakelt die past bij de voorkeur van de bezoeker.

Schakelen tussen lichte en donkere modus

Maar wat als je de gebruiker de keuze wilt laten de schakelen tussen de lichte en donkere stand? Dan kun je het niet meer in de CSS vastleggen via de media selector.

Je kunt ook niet, via bijvoorbeeld javascript, de voorkeur van de gebruiker veranderen. Maar de voorkeur van de gebruiker kun je wel via javascript opvragen met een matchMedia query.

var mql = window.matchMedia('(prefers-color-scheme: dark');

De uitkomst van deze query is dan te gebruiken om CSS in en uit te schakelen. Maar tegelijkertijd kun je dezelfde javascript ook gebruiken om die CSS in of uit te schakelen via een voorkeur knopje op de site.

Op deze site wordt in eerste instantie de mode gebruikt die overeenkomt met de voorkeur van de bezoeker. Via het knopje rechts onder kan de mode echter ook omgeschakelt worden.

CSS maken voor de donkere modus

Als voorbeeld nemen we deze site.

Als je de CSS bekijkt dan zie je dat er maar een tiental definities van kleuren zijn:
De achtergronden voor de body, header, berichten en widgets. De kleuren van de teksten en headers en de kleuren van de links.

In de Darkmode brengen we alles terug naar elk 1 kleur voor elk de achtergrond, tekst en links, plus nog een extra kleur voor de :hover actie op de links en de headers.

body,input[type=search],input[type=search],textarea,.site-header {
    background-color: #1b639e;
    color:whitesmoke
}

.main-title a, .main-title a:hover, .main-title a:visited,a,a:visited {
	color:white;
}

.sidebar .widget,.separate-containers .inside-article, 
.separate-containers .comments-area, .separate-containers .page-header, 
.one-container .container, .separate-containers .paging-navigation, 
.inside-page-header {
    background-color: inherit;
}

.sidebar .widget .widget-title,.entry-title,a:hover,h1, h2, h3, h4, h5, h6 {
    color: #fda800;
}

WordPress plugin

Voor de hierboven beschreven weergave van de dark modus, dus op voorkeur van de browser, maar te schakelen voor de bezoeker is een wordpress plugin gemaakt.

De javascript code die hierin gebruikt wordt is ook in te zetten op andere platformen zoals Joomla of Drupal. Alleen moet dan de code handmatig aan de templates van de site worden toegevoegd.

Plaats een reactie