Zo bouwden we een donkere modus voor de Peppered-sites

De donkere modus is een trend die de afgelopen jaren zijn intrede heeft gemaakt in de design community. We wisten al gauw dat dit een goede match met de Peppered-websites zou zijn, maar leerden ook dat het toevoegen van een donkere modus veel werk zou vergen van ons kleine team. Nu de eerste site met een donkere modus live is, zijn we heel blij met hoe soepel het toevoegen van deze functie is verlopen en om het volledige potentieel ervan te benutten.

Waarom we een donkere modus hebben gebouwd

De donkere modus is een handige manier om het contrast op de site te vergroten en de tekst leesbaarder te maken. Deze functionaliteit hebben we daarom niet alleen voor sites gebouwd, maar hebben we ook beschikbaar gesteld in het Peppered-dashboard. Zo kan iedereen er zelf voor kiezen om in een lichte of donkere modus te werken. Onze gebruikers zijn ook erg enthousiast over deze nieuwe functie en hebben ons laten weten dat ze het fijn vinden dat hun ogen niet meer overbelast raken. We weten hoe het is om de hele dag naar een scherm te staren en dat dit zijn tol eist van je gezichtsvermogen. We vinden het dan ook belangrijk om de donkere modus beschikbaar te stellen en het onze gebruikers zo wat gemakkelijker te maken.

In 4 stappen naar een licht/donker switch

1. Ontwerpen van het systeem

We hebben lang nagedacht over hoe we ervoor konden zorgen dat ons ontwerp zo leesbaar mogelijk was en er toch goed uitzag in de donkere modus. We hebben eerst een aantal soorten content onderzocht die in het verleden moeilijk te lezen waren in de donkere modus, zoals de tekst op een witte achtergrond. Vervolgens hebben we daar enkele richtlijnen voor opgesteld die aanduiden wat het precies onaantrekkelijk maakt voor lezers. Daarna kozen we lettertypen en kleuren die zowel in een lichte als donkere modus goed leesbaar waren en voegden waar nodig contrast tussen elementen toe (bijvoorbeeld door knoppen af te laten steken tegen hun achtergrond).

2. Variabelen opschonen

Na de designfase zijn begonnen met de technische implementatie van de dark modus, door variabelen op te schonen en nieuwe aan te maken. We vonden allerlei kleurinconsistenties, zoals verspreide hex-codes en eenmalige variabelen. Gelukkig zijn we zo streng geweest om ze op één plek op te slaan. We konden dus gemakkelijk beginnen met het maken van een nieuw bestand en alle kleurvariabelen hier naartoe verplaatsen, waarbij we de bestandspaden waar nodig hebben bijgewerkt. Vervolgens hebben we bovenaan het bestand een importinstructie gemaakt die naar de kleuren verwijst, in plaats van alle kleuren rechtstreeks van daaruit te importeren.

3. Het maken van themavariabelen

Nu we een apart bestand voor onze donkere moduskleuren hadden gemaakt, moesten we ervoor zorgen dat het aanpassen van de kleuren op de site telkens in dit ene bestand zou gebeuren. Het dupliceren van code tijdens het project of rechtstreekse wijzigingen in themabestanden aanbrengen, zou later namelijk voor problemen kunnen zorgen (vooral als iemand anders aan een ander deel van de site zou werken).

Voorbeeld van hoe we de themakleuren van de lichte modus hebben ingesteld.

Voorbeeld van hoe we de themakleuren van de donkere modus hebben ingesteld.

4. Implementatie van een switch

Ten slotte voegden we een switch toe waarme je tussen de thema's kunt schakelen. Ook moesten we een manier vinden om themawijzigingen te beheren en de laatste themavoorkeur in een cookie op te slaan. We hebben drie themamodi gemaakt: licht, donker en één die je browserinstellingen volgt. Dus als je browser in de donkere modus staat, wordt de website automatisch ook in de donkere modus getoond.

Deze code is toegevoegd op de plek waar we onze root een data-attribuutthema wilden laten hebben. Op basis daarvan kunnen we de lichte of donkere thema-mixin opnemen.

We hebben een module genaamd theme.ts op de site gemaakt, waarmee we themawijzigingen kunnen beheren en de nieuwste themavoorkeur in een cookie kunnen opslaan.

See you on the dark site

Zoals je je kunt voorstellen, is het toevoegen van een donkere modus aan een site die al live staat niet iets dat van de ene op de andere dag kan worden gedaan. We zijn dan ook trots op wat voor moois we uiteindelijk hebben neergezet!

Wil je ook een donkere modus op je Peppered-site? Stuur je verzoek naar onze servicedesk, dan bespreken we graag de mogelijkheden. Heb je nog geen Peppered-site? Neem contact met ons op om er meer over te horen.

Meer zoals dit