Home / WordPress / Dark mode instellen in WordPress

Dark mode instellen in WordPress

Dark mode instellen in WordPress

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.

Abonneer je op mijn YouTube kanaal

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.

YouTube in donkere modus (dark mode)

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

WP Dark Mode

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.

Algemene instellingen van WP Dark Mode

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.

Switch / wissel instellingen in WP Dark Mode

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.

Dark mode in de WordPress editor

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.


WordPress Hulp Nodig? Join Het WP Lab

Het WordPress Lab Mockup

Heb je vragen aan de hand van dit artikel of wil je verder op weg geholpen worden met je website?

Sluit je aan bij Het WordPress lab, een community voor WordPress-liefhebbers waarin ik antwoord geef op jouw WordPress vragen en je toegang krijgt tot al mijn WordPress cursussen.

«
»