Donkere modus toevoegen aan je WordPress site

We brengen meer tijd dan ooit achter beeldschermen door, dus het is niet zo verwonderlijk dat donkere modus steeds populairder wordt. In deze blogpost belichten we kort de voordelen van een donkere modus toevoegen aan je WordPress site, en leggen we uit hoe je dit kunt doen.   

Wat zijn de voordelen van een donkere modus toevoegen?

Donkere modus is een instelling die de weergave van een website naar een licht-op-donker kleurenschema verandert. Deze aanpassing reduceert de hoeveelheid wit licht die er van het beeldscherm af komt, wat veel rustiger is voor de ogen – vooral in de avonduren. Omdat er minder pixels verlicht hoeven te worden, verbruikt een website of applicatie in donkere modus minder stroom. Dat is niet alleen beter voor het milieu, maar ook voor de batterijcapaciteit van apparaten.

Voor de duidelijkheid: hoewel de termen vaak door elkaar worden gehaald, is donkere modus (dark mode) niet hetzelfde als nachtmodus (night mode). Bij donkere modus worden de kleuren van de gebruikersinterface aangepast naar donkerdere kleuren, terwijl bij nachtmodus het licht dat het beeldscherm uitstraalt wordt aangepast naar een warmere kleur.

Donkere modus toevoegen aan je WordPress site met WP Dark Mode

Er zijn verschillende WordPress thema’s waar een donkere modus al geïntegreerd is. Als jouw thema die mogelijkheid niet heeft en je liever niet van thema wisselt, dan kun je ook door middel van een plugin een donkere modus toevoegen aan je WordPress site. Er zijn verschillende plugins beschikbaar – voor dit voorbeeld maken we gebruik van de WP Dark Mode plugin.

Stap 1: Install de WP Dark Mode plugin

Ga op je WordPress naar Plugins > Nieuwe plugin toevoegen en zoek naar ‘WP Dark Mode’. Installeer de plugin. Zodra je de WP Dark Mode activeert, kom je op de instellingen pagina terecht.

Stap 2: Schakel de donkere modus in

Op het General Settings tabblad kun je de donkere modus in- en uitschakelen. Enable Frontend Dark Mode staat standard ingeschakeld; dit betekent simpelweg dat de donkere modus beschikbaar is voor je bezoekers; zij kunnen dit zelf inschakelen. Ook Enable OS Aware Dark Mode staat standaard ingeschakeld. Dit wil zeggen dat de bezoekers die hun apparaat op donkere modus hebben ingesteld, automatisch de donkere versie van je website zullen zien.

Stap 3: Customize je donkere modus kleuren

Op het Color Settings tabblad kun je wat experimenteren met verschillende kleuren voor de donkere modus. Met de gratis versie van de plugin zijn de opties enigszins beperkt; als je besluit om te upgraden, dan kun je zelf een kleurenpalet samenstellen.

Stap 4: Configureer de zwevende schakelaar

Op het Switch Settings tabblad kun je de zwevende schakelaar activeren. Er komt dan een knop aan de front-end die het mogelijk maakt voor je bezoekers om de donkere modus in- en uit te schakelen. Je kunt eenvoudig de stijl, de grootte en de positie van de schakelaar instellen. Ook hiervoor geldt dat je met de gratis versie wat minder opties hebt dan met de betaalde versie van de plugin.

Stap 5: Bekijk je donkere modus aan de front-end

Nadat je eventuele wijzigingen hebt opgeslagen kun je je website aan de front-end bekijken om te zien of alles naar wens is. Ik heb de gratis versie van de WP Dark Mode plugin zelf even getest en het werkt prima. Hieronder zie je het verschil tussen een originele webpagina en dezelfde pagina in donkere modus:

Tip: Zorg wel dat je een website logo met een transparante achtergrond gebruikt, anders ziet het er niet zo netjes uit in donkere modus.