Je website in Dark mode
Inmiddels bij velen al wel bekend, de dark modus op je telefoon of tablet. Sinds enige tijd is deze optie ook beschikbaar op de het nieuwe besturingssysteem van Apple. En sinds de laatste update van Google Chrome op 31 juli is deze nu ook beschikbaar in deze browser.
Nieuwsgierig als we zijn wilden we ook wel eens weten of we dit konden toepassen op onze website. En het antwoord is ja! Met een kleine update aan de styling van onze website zijn we nu ook “dark mode proof”. Deze modus wordt alleen geactiveerd als jouw browser dit ondersteund en ingeschakeld heeft.
Door deze styling aan onze website toe te voegen schakelt de website straks native naar de donkere versie van je besturingssysteem. Met de nieuwe iOS om de hoek, die deze optie ook ondersteund zijn wij hiermee dus klaar voor de toekomst van een goede internetervaring op onze website.
Benieuwd?
Check dan onze website eens op een computer met dark modus geactiveerd. Hieronder hebben we aantal screenshots geplaatst van het verschil. Check wel even of je de laatste versie van Chrome geïnstalleerd hebt.
Wil je zelf hiermee aan de slag?
Hieronder een simpele truck die ervoor zorgt dat je dit ook op je eigen website kunt toepassen. Wel heb je hiervoor een beetje kennis nodig van CSS. Heb je dat? Dat is mooi, want dan ben je waarschijnlijk ook al bekend met media queries (deze worden gebruikt voor de responsive weergave van je website).
Voor de dark mode van je browser is hiervoor een nieuwe media query toegevoegd. Deze is ook officieel vastgelegd bij de W3C. De query die je kunt gebruiken voor Dark mode is hieronder te zien:
@media (prefers-color-scheme: dark) {
// Jouw CSS code om ervoor te zorgen dat de ervaring in de donkere modus werkt
}