Wil je leren hoe je een dark mode optie kunt toevoegen aan je WordPress website?
Ondertussen is de dark mode niet meer weg te denken. Iedere device heeft hier ondertussen wel ondersteuning voor en het wordt vaak gebruikt.
Door een dark mode toe te voegen aan je website kun je ervoor zorgen dat jouw website zich automatisch aanpast aan de browserinstellingen van de bezoeker. Het is ook mogelijk om je bezoekers te laten schakelen tussen de verschillende opties.
In dit artikel zal ik je laten zien hoe je op een eenvoudige manier een dark mode aan je website kunt toevoegen. Niet alleen op de voorkant, maar ook in het beheerdersgedeelte van WordPress.
Inhoudsopgave: Dark mode instellen in WordPress
Video: Dark mode in WordPress
In onderstaande video laat ik je zien hoe je een donkere modus kunt instellen voor op je WordPress website. Dit kan zowel voor de frontend als backend.
- Plugin: WP Dark Mode
- Premium versie met meer opties: WP Dark Mode Pro
Wat is dark mode?
Dark mode is in het Nederlands “Donkere modus”. Simpel gezegd is het gewoon een kleurinstelling waarmee je een website op een donkere achtergrond plaatst met witte letters. De donkere modus is qua kleurinstellingen dus de omgekeerde variant van de lichte modus.
Het voordeel van de dark mode is dat je de hoeveelheid witte licht van een scherm kunt verminderen. Dit is minder vermoeiend voor je ogen, met name in de avond.
Door dark mode aan je website toe te voegen geef je bezoekers de mogelijkheid om dit aan of uit te schakelen. Daarnaast krijg je ook controle over hoe dit eruit zal komen te zien op je website.
Wellicht is het je al opgevallen dat meer websites dit allang doen. Denk bijvoorbeeld aan YouTube waar je dit eenvoudig in of uit kunt schakelen.

In WordPress kun je de dark mode op de voorkant van je website en in het beheerdersgedeelte vrij eenvoudig realiseren. Ik zal je uitleggen hoe.
Dark mode instellen in WordPress

WordPress heeft geen standaard ingebouwde functionaliteit waarmee je dark mode kunt inschakelen. Wel kan het zijn dat er in het thema waar je gebruik van maakt deze optie zit. Dan is het simpelweg deze optie inschakelen.
Wanneer jij niet in deze situatie zit, wat bij de meeste mensen zo zal zijn, dan kunnen we de plugin WP Dark Mode installeren. Het is een gratis plugin, maar als je gebruik wil maken van de premium opties, dan kun je de officiële premium plugin hier vinden.
Algemene instellingen van WP Dark Mode
Nadat je de plugin geïnstalleerd hebt krijg je een nieuwe menu-item genaamd WP Dark mode. Ga naar WP Dark mode → Settings om naar instellingenpagina te gaan.

Je zal hier zien dat standaard direct ingesteld staat dat de optie Enable frontend dark mode actief staat. Deze optie zorgt ervoor dat mensen op de voorkant van je website de dark modus kunnen zien.
Een andere optie die aanstaat is Enable OS Aware Dark Mode. Dit houdt in dat een bezoeker automatisch de donkere modus ziet wanneer het apparaat waarmee de website bekeken wordt ook ingesteld staat op de donkere modus.
Om ook te zorgen dat je in het beheerdersgedeelte van WordPress zelf gebruik kunt maken van de dark mode, zijn de opties Enable Backend Dark Mode en Block Editor Dark Mode er ook. Schakel deze opties in als je zelf ook in het beheerdersgedeelte gebruik zou willen van de donkere modus.
Wanneer je naar Advanced Settings gaat heb je ook nog de mogelijkheid om de dark mode de standaard te maken.

Bezoekers van je website zullen dan in eerste instantie de donkere modus zien wanneer je website bezocht wordt. Verder zie je ook dat het nog gebaseerd op de tijd kan of wanneer de zon ondergaat in de desbetreffende tijdzone.
Kleurinstellingen
Wanneer je naar het tabblad Color Settings gaat heb je de mogelijkheid om voor een andere color preset te gaan.

In de gratis versie van deze plugin heb je twee opties. Gold en Sapphire. Wil je één van de andere kleuren gebruiken of zelf de kleuren bepalen? Dan heb je de premium versie van WP Dark Mode nodig. Voor de meeste mensen zullen de twee standaard opties voldoen.
Switch / Wissel instellingen
Wanneer je naar het tabblad Switch Settings gaat heb je ook nog interessante opties.

Zo kun je bij Show Floating Switch aangeven of bezoekers van je website de mogelijkheid hebben om te wisselen tussen de lichte en donkere modus, wat voor icoontje je daarvoor zou willen gebruiken, hoe groot dit icoontje moet zijn en nog een aantal opties meer.
Dark modus in WordPress beheerdersgedeelte
Bij de algemene instellingen kon je al zien hoe je de Dark Modus in het WordPress beheerdersgedeelte kon inschakelen. Dit is door simpelweg de opties Enable Backend Dark Mode en Block Editor Dark Mode in te schakelen.
Wanneer je dit hebt ingeschakeld staan zal je bovenaan in de balk de optie zien om te kiezen tussen de light en dark mode.

In de editor van WordPress kun je ook de dark mode gebruiken. Dit ziet er als volgt uit.

Je kunt hier linksboven aangeven wat voor kleur je zou willen gebruiken. Bekijk dus even wat je zelf prettig vindt.
Ik hoop dat ondertussen duidelijk is geworden hoe de dark mode in WordPress in te schakelen is en dat je bezoekers en jijzelf hiervan kunt profiteren als je in de nacht naar je website kijkt.