Als je geïnteresseerd bent in het toevoegen van een donkere modus (dark mode) optie aan je WordPress website, dan zal dit artikelen alles behandelen wat je moet weten.
Allereerst leer je een aantal van de voordelen die de donkere modus voor je site kan hebben, zoals het verbeteren van de toegankelijkheid, het creëren van een gezondere ervaring voor bezoekers, het verminderen van energieverbruik en over het algemeen het voldoen aan gebruikersvoorkeuren.
Daarna laten we je precies zien hoe je de donkere modus zonder code aan WordPress kunt toevoegen met behulp van plugins of oplossingen met je eigen code.
Aan het eind van dit artikel weet je waarom en hoe je de donkere modus van WordPress kunt instellen. Laten we beginnen..
Wat is de donkere modus van WordPress?
De WordPress donkere modus verwijst naar het geven van de optie aan de bezoekers van je website om te kiezen tussen een “licht” stijl thema en een “donker” stijl thema.
Je kent dit concept misschien al van het besturingssysteem van je computer of smartphone. De meeste besturingssystemen laten je kiezen tussen lichte en donkere interfacemodi, sommige laten je zelfs automatisch schakelen tussen lichte en donkere modi op basis van het tijdstip van de dag.
Hetzelfde basisidee geldt voor de donkere modus van WordPress. Bezoekers kunnen een knop of een ander interface-element gebruiken om eenvoudig te wisselen tussen de lichte en donkere modi. De inhoud is in beide gevallen precies hetzelfde – het enige verschil is het kleurenschema.
Hier is een voorbeeld van onze test WordPress site in de standaard “lichte” modus:
Dan zie je hier precies dezelfde site in de “donkere” modus:
Onze testsite kiest automatisch welke versie wordt weergegeven op basis van de voorkeuren van het besturingssysteem van elke bezoeker. Gebruikers kunnen hun ervaringen ook handmatig aanpassen met behulp van de widget in de rechterbenedenhoek.
Waarom een donkere modus aanbieden op WordPress?
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..
De donkere modus maakt je website toegankelijker
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:
- Verbeterd contrast voor tekstcontent. De donkere modus heeft meestal een zeer sterk contrast tussen de achtergrondkleuren en tekstkleuren. Dit kan het voor mensen met visuele handicaps makkelijker maken om inhoud te lezen en te consumeren. Een hoog contrast maakt deel uit van de WCAG, dus het aanbieden van een donkere modus kan indirect helpen om de WCAG te volgen.
- Gemakkelijker te begrijpen voor sommige bezoekers. Bezoekers die lijden aan dyslexie of andere visuele verwerkingsstoornissen kunnen moeite hebben met het interpreteren van zwarte tekst op een witte achtergrond, dus de donkere modus kan een betere ervaring creëren voor deze bezoekers. Dit probleem wordt het Scotopic Sensitivity Syndrome of Irlen Syndrome genoemd.
- Minder problemen voor mensen met migraine. Mensen die last hebben van migraine wordt vaak aangeraden om fel licht te vermijden. Door een donkere ervaring te creëren, kunnen deze bezoekers van je website genieten terwijl het risico op verergering van hun migraine wordt geminimaliseerd.
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.
De donkere modus kan gezonder zijn voor je bezoekers
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.”
De donkere stand kan minder energie verbruiken
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.
Sommige mensen geven gewoon de voorkeur aan de donkere modus
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.
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.
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.
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:
- darkmode.js
- drkmd.js
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.
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.
Laat een reactie achter