, ,

Zo voeg je een donkere modus toe aan je website

Website donkere modus Je hebt ‘m ondertussen vast al ergens zien opduiken op het internet: de dark mode of donkere modus. Wat is deze mysterieuze feature en welke voordelen brengt hij voor jou en je bezoekers? En bovendien: hoe installeer je makkelijk zo’n modus zelf op je site? Je leert het hier!

Op meer en meer apps en websites krijg je anno 2021 de mogelijkheid om te switchen naar een donkere modus of ‘dark mode’. De naam doet misschien vermoeden dat je bij het klikken naar één of andere illegale versie van de site wordt omgeleid, maar een donkere modus is er puur voor het gebruiksgemak van je bezoekers (en dat van jou).

Wat is een donkere modus?

De donkere modus of dark mode is een universele naam voor een bepaalde displaysetting op toestellen zoals smartphones of laptops. Standaard zie je de lichte modus of light mode: donkere tekst op een lichte achtergrond. In dark mode wordt dit echter omgedraaid en zie je een lichtkleurige tekst op een donkere achtergrond.

Wat zijn de voordelen van zo’n dark mode?

Het idee achter een donkere modus is dat in deze setting het licht dat van het toestel uitgaat drastisch wordt verminderd terwijl de leesbaarheid/zichtbaarheid even goed blijft. De voordelen hiervan zijn:

  • Handig in weinig belichte omgevingen, zoals ‘s avonds op je terras of als je in bed nog wat wil lezen/werken zonder je partner te storen
  • De batterij van je toestel loopt minder snel leeg
  • Je toestel zendt minder blauw licht uit en houdt je zo dus minder uit je slaap
  • Veel mobiele gebruikers vinden het er mooier uitzien
  • Je website komt meteen hedendaags over als je een donkere modus voorziet (naast een donkere modus zijn er nog vier belangrijke features die jouw website nodig heeft voor een moderne uitstraling. Ontdek welke vier dat zijn in dit artikel.)

Hoe voeg je een donkere modus toe aan je WordPress website?

Om in een handomdraai een donkere modus aan je website toe te voegen, kiezen we voor een handige plugin. Ik raad WP Dark Mode aan. Voor meer tips over hoe je een plugin installeert, lees je mijn stappenplan voor het installeren van plugins.

Na het activeren van de plugin ga je naar WP Dark Mode > Settings in je Dashboard.

In de instellingen zie je dat ‘Enable OS aware Dark Mode’ aan staat. Dat betekent dat je website automatisch naar de donkere versie switcht als de gebruiker zijn toestel zelf op die modus heeft ingesteld.

Als je in de zijbalk klikt op ‘Switch settings’ kan je de knop bewerken waarmee de gebruiker tussen de lichte en donkere modus van de website kan switchen. Hier kan je een stijl voor je knop, de positie van de knop op de pagina en eventueel een animatie kiezen. In de Pro versie van de plugin heb je nog een hele reeks meer opties en stijlen om uit te kiezen.

Als je tevreden bent met je keuze klik je onderaan op de knop Save Settings. Als je nu je website bezoekt, zal je de knop op de door jou gekozen positie zien staan. Klik erop om de donkere modus op je eigen website in actie te zien! Niet helemaal tevreden met het donkere kleurschema? In het tabblad Color Settings van de plugininstellingen vind je twee gratis beschikbare kleurschema’s.

Met deze plugin kan je niet enkel een modusswitcher voor je bezoekers instellen. Ook voor jou als administrator van de website biedt WP Dark Mode de optie om de back-end van de website te switchen. Erg handig als je lichtgevoelige ogen hebt zoals ik, of als je vaak ‘s avonds aan je site werkt. Om de back-end van je website te switchen, vind je nu bovenaan in de zwarte balk een nieuwe knop:

Zo kan je gemakkelijk in je website werken zonder last te krijgen van je ogen.

 

Ziezo, ik hoop dat je dankzij dit artikel nu een handige donkere modus aan je website hebt kunnen toevoegen. En nu je toch aan je website aan het sleutelen bent voor meer gebruiksgemak, kan je meteen deze tips toepassen voor een snellere WordPress website.

Vond je dit een leuk artikel? Deel het dan via de knoppen hieronder en schrijf je rechts in voor de nieuwsbrief om updates te krijgen!