Er zijn veel redenen waarom je zou willen overwegen om de donkere modus op je website aan te bieden. Deze kunnen variëren van eenvoudige gebruikersvoorkeuren tot het toegankelijker maken van je website en het creëren van een gezondere ervaring voor bezoekers.
Laten we ze eens doornemen..
Een groot voordeel van het aanbieden van de donkere modus is dat het je website toegankelijker kan maken.
Soms afgekort als a11y, verwijst toegankelijkheid naar de praktijk om je website bruikbaar te maken voor zoveel mogelijk mensen, inclusief mensen met een beperking.
Een voorbeeld van toegankelijkheid is ervoor zorgen dat mensen die je website bekijken met ondersteunende schermlezers nog steeds een goede ervaring hebben.
Behalve dat het in het algemeen goed is om het voor iedereen gemakkelijker te maken om van je website te genieten, is toegankelijkheid in veel rechtsgebieden ook een wettelijke vereiste. Je hebt bijvoorbeeld de American With Disabilities Act (ADA) en de European Accessibility Act.
Hoewel het aanbieden van een donkere modus niet direct deel uitmaakt van de Web Content Accessibility Guidelines (WCAG), kan het de toegankelijkheid op andere manieren verbeteren.
Hier zijn enkele opvallende gebieden waar de donkere modus de toegankelijkheid kan verbeteren:
Dat gezegd hebbende, is de donkere modus niet in elke situatie de beste optie voor toegankelijkheid. Mensen met astigmatisme kunnen bijvoorbeeld moeite hebben met het lezen van lichte tekst op een donkere achtergrond, omdat dit een wazig effect kan veroorzaken dat “halatie” wordt genoemd. Dit is een van de redenen waarom het gunstig kan zijn om gebruikers de optie te geven om te kiezen tussen de lichte en donkere modus.
Het aanbieden van een donkere modus op je website kan ook op verschillende manieren bijdragen aan een gezondere ervaring voor je bezoekers.
Ten eerste kan de donkere modus bezoekers helpen bij een betere slaaphygiëne, vooral als ze rond bedtijd surfen. Slaapexperts raden mensen aan om fel licht te vermijden in de uren voor het slapengaan.
Hoe lichter en helderder je website, hoe slechter het is voor de slaaphygiëne van je bezoekers. Door een donkere modus aan te bieden, kun je je bezoekers nog steeds laten communiceren met je WordPress site met een minimale impact op hun slaapschema’s.
Veel implementaties van de donkere modus kunnen de donkere modus ook automatisch inschakelen op basis van de voorkeuren van het besturingssysteem van elke bezoeker. Als een bezoeker zijn besturingssysteem configureert om automatisch over te schakelen naar de donkere modus tegen bedtijd, dan kan je website dat schema volgen.
De donkere modus kan ook gemakkelijker zijn voor de ogen van bezoekers en minder oogvermoeidheid veroorzaken. In een onderzoek van de University of Central Florida (UCF) ontdekten de auteurs bijvoorbeeld dat “de visuele vermoeidheid van de deelnemers significant lager was met de donkere modus dan met de lichte modus.”
Bovendien hadden deelnemers een hogere gezichtsscherpte in de donkere stand en voltooiden ze de tests van het onderzoek “met significant minder fouten in de donkere stand dan in de lichte stand.”
Hoewel dit niet voor elke bezoeker een voordeel is, is een ander klein voordeel van het aanbieden van de donkere modus dat het minder energie zal verbruiken op OLED-schermen. Omdat OLED-schermen individuele pixels kunnen uitschakelen in plaats van het hele scherm te verlichten, hebben OLED-schermen minder energie nodig om donkergekleurde pixels weer te geven.
De exacte energiebesparing hangt af van de helderheidsinstellingen van het scherm van de gebruiker, maar kan variëren van een bescheiden 3%-9% bij een lage helderheid tot een veel grotere 39%-47% als de helderheid van het scherm van de gebruiker hoger is ingesteld.
Deze cijfers komen uit een onderzoek van de Purdue University waarin het energieverbruik van het scherm bij verschillende helderheidsniveaus werd geanalyseerd.
Naast de specifieke voordelen hierboven, is het ook de moeite waard om op te merken dat sommige van je bezoekers misschien gewoon de donkere modus willen gebruiken vanwege hun eigen persoonlijke voorkeuren.
Deze voorkeuren kunnen het gevolg zijn van een aantal van de genoemde voordelen, maar het kan ook zijn dat iemand gewoon de voorkeur geeft aan de donkere modus om zijn eigen unieke redenen.
Door de donkere modus als optie aan te bieden, kun je een betere gebruikerservaring creëren voor deze bezoekers.
4 manieren om de donkere modus op WordPress te implementeren
Als je overtuigd bent van het idee om de donkere modus toe te voegen aan WordPress, dan kun je dat op een paar verschillende manieren doen.
Hieronder nemen we vier verschillende opties door:
1. Gebruik een WordPress donkere modus plugin
Als je niet met code wilt werken, is een van de eenvoudigste manieren om de donkere modus aan je website toe te voegen het gebruik van een WordPress donkere modus plugin.
Wat de meeste van deze plugins zo gemakkelijk maakt om mee te werken, is dat ze in wezen gewoon plug-and-play zijn. Je kunt de donkere modus binnen een paar minuten werkend hebben en dan dingen aanpassen als dat nodig is.
Hier zie je bijvoorbeeld hoe het werkt met een van de populairste opties – de gratis WP Dark Mode plugin op WordPress.org.
Na het activeren van de plugin heb je direct een werkende donkere modus op je website. Het is in feite dezelfde plugin die we hebben gebruikt voor de voorbeeldschermen hierboven.
De plugin kiest automatisch welke versie je wilt gebruiken op basis van de voorkeuren van het besturingssysteem van elke bezoeker. Vervolgens kunnen gebruikers handmatig wisselen tussen de modi met behulp van een zwevende widget in de rechterbenedenhoek.
Een voorbeeld van een WordPress site in donkere modus. Als je wilt aanpassen hoe de donkere modus werkt, kun je naar de instellingen van de plugin gaan. Daar kun je de stijlen aanpassen, kiezen hoe je de standaard ervaring kiest en meer.
WP Donkere modus plugin instellingen gebied. Als je geïnteresseerd bent in de plugin route, zijn hier een aantal populaire gratis donkere modus plugins die je kunt overwegen:
Omdat deze plugins een groot effect kunnen hebben op je frontend site, raden we je aan ze te testen voordat je ze activeert op je live website.
Als je de managed WordPress hosting van Kinsta gebruikt, kun je de testfunctionaliteit van Kinsta gebruiken om deze plugins eenvoudig te testen op een veilige sandbox versie van je site.
2. Kies een thema dat de donkere modus al ondersteunt
Een andere codevrije manier om toegang te krijgen tot de donkere modus is door een WordPress thema te kiezen met ingebouwde donkere modus functionaliteit.
Het gratis Kanso thema van Rich Tabor bevat bijvoorbeeld zijn eigen ingebouwde donkere modus functionaliteit, die je in actie kunt zien op Rich’s persoonlijke website.
Het Kanso thema heeft een ingebouwde donkere modus features. Als je je site al hebt gebouwd met een ander thema, is het waarschijnlijk niet de moeite waard om van thema te wisselen alleen om toegang te krijgen tot de donkere modus. Maar als je nog bezig bent met het bouwen van je site en de donkere modus is belangrijk voor je, dan is het misschien de moeite waard om die feature op je lijstje te zetten van features die je moet overwegen bij het kiezen van een WordPress thema.
3. Gebruik een JavaScript bibliotheek voor donkere modus
Als je het prettig vindt om met code te werken, zijn er ook kant-en-klare JavaScript bibliotheken die je kunt gebruiken om de donkere modus aan je website toe te voegen.
Of, als je een WordPress ontwikkelaar bent, kun je deze bibliotheken ook gebruiken om eenvoudig een donkere modus toe te voegen aan een plugin of thema dat je aan het ontwikkelen bent. Sommige van de plugins voor de donkere modus op WordPress.org zijn zelfs bovenop deze bibliotheken gebouwd.
Je kunt verschillende donkere modus bibliotheken vinden, maar hier zijn twee van de populairste opties:
Als je een van deze bibliotheken wilt gebruiken, raden we je ten zeerste aan om ze te testen op een testsite voordat je code toevoegt aan je live website. Nogmaals, als je je WordPress site bij Kinsta host, kun je de ingebouwde testfeature van Kinsta gebruiken.
darkmode.js
Darkmode.js gebruikt VanillajS en CSS mix-blend-mode om een donkere modus toe te voegen zonder extra configuratie. Standaard voegt het een zwevende switcher toe die bezoekers kunnen gebruiken om te schakelen tussen de donkere modus en de lichte modus, maar je kunt deze widget uitschakelen als je liever je eigen oplossing bouwt.
Bij het eerste bezoek van een gebruiker zal het de modus kiezen op basis van de voorkeuren van het besturingssysteem en het ondersteunt ook lokale opslag zodat de voorkeuren van bezoekers worden opgeslagen voor toekomstige bezoeken. Je kunt een voorbeeld in actie zien op de darkmode.js pagina waarnaar hierboven wordt verwezen.
Omdat het mix-blend-mode gebruikt in plaats van dat je je eigen CSS regels moet toevoegen, is deze bijna plug-and-play.
drkmd.js
Drkmd.js gebruikt een iets andere benadering. In plaats van CSS mix-blend-mode te gebruiken om automatisch een donkere modus van je site te maken, kun je zelf de CSS specificeren die je wilt gebruiken voor de donkere modus. Je kunt deze stijlregels dan aan je site toevoegen met de klassen theme-light en theme-dark.
Je kunt ook eenvoudig je eigen toggle toevoegen om tussen de modi te schakelen. Om dit te doen voeg je het data-drkmd-attach attribuut toe aan de script tag.
Het bevat ook andere handige features, zoals de mogelijkheid om automatisch de voorkeuren van het besturingssysteem van gebruikers te detecteren en de keuzes van gebruikers op te slaan in lokale opslag.
4. Gebruik je eigen code
Naast het gebruik van een JavaScript bibliotheek zijn er ook andere op code gebaseerde oplossingen die je kunt implementeren om de donkere modus aan je site toe te voegen.
Deze werken meestal door een set CSS regels toe te passen voor de lichte modus en vervolgens een andere set regels voor de donkere modus.
Een optie is om dit te doen met jQuery, zoals gedocumenteerd in deze tutorial. In wezen voeg je CSS regels toe voor zowel de lichte als de donkere modus.
Vervolgens kun je een knop of een schakelaar toevoegen om de donkere modus in te schakelen. Als een gebruiker die schakelaar inschakelt, kun je JavaScript gebruiken om te schakelen welke CSS klassen moeten worden gebruikt. De gelinkte tutorial hierboven doet dit met jQuery en de methoden hasClass(), addClass() en removeClass().
Je kunt het ook ingewikkelder maken als je wilt. In deze op JavaScript gebaseerde handleiding wordt bijvoorbeeld uitgelegd hoe je twee belangrijke verbeteringen kunt toevoegen aan de donkere modus van je site:
Het kan automatisch de voorkeursmodus van gebruikers detecteren op basis van hun systeemvoorkeuren.
Het kan de keuzes van gebruikers opslaan en automatisch de juiste modus laden als ze terugkomen op je site.
Over het algemeen is het waarschijnlijk eenvoudiger om een van de bovenstaande JavaScript bibliotheken voor donkere modi te gebruiken. Maar als je dat niet wilt doen, bieden deze methoden nog een alternatief op basis van code.
De donkere modus van het WordPress dashboard inschakelen
Tot nu toe hebben we ons gericht op hoe je een donkere modus kunt toevoegen aan je WordPress website aan de voorkant. Maar misschien ben je ook geïnteresseerd in het toevoegen van een WordPress dashboard donkere modus, zodat je je site kunt beheren in een gebruiksvriendelijkere interface.
Waarom zouden immers alleen de bezoekers van je site toegang hebben tot de voordelen waar we het hierboven over hadden?
Als je de donkere modus aan je WordPress dashboard wilt toevoegen, is de eenvoudigste optie het gebruik van een plugin. Er zijn twee hoofdcategorieën plugins die je kunt vinden:
Plugins die dezelfde beheerinterface behouden, maar alleen de stijlen veranderen om de donkere modus in te schakelen.
Plugins die een aangepaste dashboardinterface maken en ook een donkere modus bieden.
Als je precies hetzelfde WordPress dashboard wilt houden, maar een donkere modus optie wilt toevoegen, kun je de Dark Mode for WP Dashboard plugin overwegen, die eruit ziet als de schermafbeelding hieronder.
Een voorbeeld van de donkere modus van het WordPress dashboard van een plugin. Sommige van de bovenstaande frontend dark mode plugins bieden ook features om de donkere modus in het WordPress dashboard in te schakelen, zoals de WP Dark Mode plugin.
Als je een compleet nieuwe dashboard ervaring wilt proberen met een donkere modus optie, dan kun je deze plugins overwegen:
Samenvatting
Het toevoegen van de donkere modus als optie op je website kan de toegankelijkheid verbeteren, bezoekers een gezondere ervaring bieden, het energieverbruik op sommige schermen verminderen en in het algemeen voldoen aan de persoonlijke voorkeuren van sommige gebruikers.
Als je de donkere modus aan WordPress wilt toevoegen, heb je veel opties. Voor codevrije oplossingen kun je een donkere modus plugin gebruiken of een thema met ingebouwde donkere modus. Voor iets technischere opties kun je een JavaScript bibliotheek voor donkere modi gebruiken of je eigen oplossing coderen.
Omdat het toevoegen van een donkere modus een groot effect zal hebben op het uiterlijk van de frontend van je site, moet je het grondig testen voordat je het toevoegt aan je live WordPress site.
Met Kinsta’s managed WordPress hosting kun je de donkere modus veilig testen met behulp van Kinsta’s ingebouwde testfeature en dan de wijzigingen toepassen zodra je er zeker van bent dat alles goed werkt.
Geef je site een boost met Managed WordPress hosting van Kinsta, ontworpen voor snelheid, veiligheid en eenvoud. Met Kinsta krijg je:
Moeiteloze controle in het MyKinsta dashboard
Onbeperkte gratis migraties, afgehandeld door ons deskundige migratie team
24/7/365 support door WordPress experts
Premium infrastructuur van Google Cloud
Hoogwaardige beveiliging via Cloudflare integratie
Wereldwijd bereik met 37 datacenters
Profiteer van je eerste maand gratis!
Jeremy Holcombe
Kinsta
Content & Marketing Editor bij Kinsta, WordPress Web Developer en Content Writer. Buiten alles wat met WordPress te maken heeft, geniet ik van het strand, golf en films. En verder heb ik last van alle problemen waar andere lange mensen ook tegenaan lopen ;).
