WordPress dark mode: zo voeg je het toe aan jouw site

Steeds meer mensen hebben de voorkeur voor dark mode op hun telefoons, computers en laptops. Dit is niet verwonderlijk. Dark mode is een stuk rustiger voor je ogen dan normale, lichte kleurinstellingen.

Hierom wil je misschien ook een dark mode optie aanbieden op je WordPress website. Zo kunnen bezoekers die hier de behoefte aan hebben eenvoudig schakelen tussen licht en donker.

In dit artikel laat ik je twee manieren zien hoe je dit kunt doen: via een plugin of via een theme. Ook laat ik je zien hoe dit werkt op zowel de frontend als de backend van je site.

Stel dark mode in op de frontend van je site

WordPress biedt geen ingebouwde dark mode functionaliteit aan. Gelukkig zijn er zowel plugins als themes die deze functionaliteit aanbieden.

Methode 1: installeer een dark mode plugin

Er zijn verschillende dark mode plugins, maar ik raad je aan WP Dark Mode te gebruiken. Deze plugin is licht, gebruiksvriendelijk en het werkt goed samen met de meeste WordPress themes. De plugin heeft een gratis versie en een betaalde versie met meer features. De gratis versie zal voor de meeste websites meer dan voldoende zijn.

Zodra je de plugin hebt geïnstalleerd en geactiveerd, kun je de belangrijkste functionaliteit inschakelen via WP Dark Mode » Settings.

Zorg dat zowel Enable Frontend Darkmode als Enable OS Aware Dark Mode aan hebt staan. Die eerste zorgt dat er een schakelaar aan je site wordt toegevoegd waarmee gebruikers dark mode kunnen aan- of uitzetten. Die tweede zorgt ervoor dat gebruikers wiens besturingssyteem op dark mode staat automatisch de donkere versie van je site voorgeschoteld krijgen.

Wanneer je tevreden bent met je instellingen, zorg dat je ze opslaat.

Vervolgens kun je in de weer met het uiterlijk van je schakelaar:

En de kleurinstellingen van dark mode:

Je hoeft niet je eigen kleurenschema in elkaar te klussen. In plaats daarvan kun je via de Want to to use color presets? knop ook kiezen voor al ontwikkelde dark mode kleurenschema’s zoals Gold of Sapphire.

Om je een idee te geven wat je hier in de praktijk mee kunt bereiken, dit is hoe Start24 eruit ziet in dark mode met het Gold kleurenschema:

En zo zijn er nog veel meer handige instellingen waar je gebruik van kan maken.

Methode 2: gebruik een theme die dark mode ondersteunt

Mocht je een nieuwe WordPress site willen bouwen, of er voor open staan van theme te wisselen, kijk dan naar Kadence.

Kadence is een multifunctioneel, lichtgewicht theme waar je praktisch iedere site mee in kan zetten die je maar kunt bedenken. We gebruiken het voor Start24. Het is een Gutenberg-based theme wat betekent dat je site er super snel mee laadt en je Google’s Core Web Vitals met gemak passeert. Je kunt Kadence gratis gebruiken maar de theme heeft ook een betaalde Pro versie met extra features.

De Pro versie van Kadence beschikt over een dark mode optie die je aan je site kan toevoegen. Dit is een welkome optie, want het scheelt je weer een extra plugin die je moet installeren.

Dark mode optie aanzetten met Kadence Pro

Om dark mode aan je site toe te voegen via de Kadence theme, ga eerst naar Appearance » Kadence in je WordPress dashboard:

Nu zal je nieuwe instellingen aantreffen onder Appearance » Customize » General » Color Switch (Dark Mode).

Zorg dat Enable Color Palette Switch (Dark Mode) en Show Fixed Switch allebei aanstaan. Vervolgens verschijnt er een schakelaar op je website:  

Om de schakelaar te laten werken, moet je een “donker” kleurenpalet instellen bij General » Colors in de customizer.

Kleurenpalet 1 is verantwoordelijk voor de website’s light mode, terwijl kleurenpalet 2 nu je website’s dark mode bepaald:

Let op: het is cruciaal dat je het Kadence global color palet op de juiste manier gebruikt om dark mode goed te laten werken. Hoe je dat precies doet kun je hier lezen.

Stel dark mode in bij je WordPress dashboard

Wanneer je veel tijd in je WordPress dashboard doorbrengt, zal je het wellicht ook in dark mode willen gebruiken. Met de eerder genoemde WP Dark Mode plugin kan dit.

Stap 1: zet dark mode aan in je backend

Allereerst, ga naar WP Dark Mode » Settings » General Settings. Zorg nu dat Enable Backend Darkmode aan staat.

Net zoals dit werkt voor je bezoekers, schakelt je dashboard nu automatisch over naar dark mode. Bovenaan je dashboard zie je nu ook een dark mode toggle om tussen de twee instellingen te wisselen.

Zoals je zou verwachten zien alleen de gebruikers van je backend dit. Als je dark mode voor je frontend niet hebt ingeschakeld, zien je bezoekers gewoon je normale website.

Stap 2: pas het kleurenpalet van je dashboard aan

Zodra je dark mode voor je backend hebt ingeschakeld, is het handig om even een stel verschillende secties van je WordPress dashboard te bekijken. Het kan zijn dat sommige kleuren niet meer zo goed uit de verf komen.

Gelukkig kan je het kleurenpalet van je dashboard aanpassen om te zorgen dat het goed aansluit bij dark mode.

Om dit te doen ga je naar Users » Profile.

Hier kun je kiezen uit een groot aantal kleurencombinaties. Test zelf welke het beste werkt voor je.

Conclusie

WordPress dark mode kan zowel je gebruikers als jezelf een stuk gelukkiger maken. Wil je zoveel mogelijk gebruikers zo goed mogelijk bedienen, overweeg dan om de optie aan je site toe te voegen.

Er zijn twee manieren om dit te doen. De eerste is via een plugin zoals WP Dark Mode. De gratis versie van deze plugin zal voor de meeste mensen meer dan voldoende zijn.

Als je geen zin hebt om nog een plugin aan je site toe te voegen, gebruik dan een WordPress theme waarbij dark mode ingebakken zit. Kadence is in dit geval een van je beste opties. De theme is licht, snel en eenvoudig te gebruiken. Bedenk dat je wel gebruik moet maken van Kadence Pro om toegang te krijgen tot de dark mode functionaliteit.