Tips Webontwikkeling

Joining the dark side met prefers-color-scheme

Dark mode website met prefers-color-scheme

We staan aan de vooravond om de donkere zijde van het web te bereiken. Later dit jaar word het namelijk mogelijk om websites te voorzien van Dark Mode welk, aansluit op het thema van het besturingssysteem.

Wanneer kan ik dark mode met prefers-color-scheme gebruiken?

Op moment van schrijven zijn er welgeteld twee browsers die ondersteuning bieden voor dark mode. Het gaat hierbij om Firefox Nightly 67 en de laatste versie van Safari op de Mac. Firefox 67 komt naar verwachting op 14 mei 2019 uit. Apple heeft ondersteuning voor Dark mode binnen websites in Safari uitgebracht op 25 maart 2019 voor MacOS. Dark mode is in ieder geval te gebruiken op de Mac en Windows 10.

Dark mode binnen mijn blog.

Dark mode website met prefers-color-scheme
Mijn blog voorzien van donkere modus.

Zoals je kan zien op de afbeelding die hierboven staat heb ik mijn blog voorzien van dark mode. Dit was relatief eenvoudig te doen met CSS Media Query’s. Mocht je het willen testen kan dit met de laatste Firefox Nightly of Safari. Hieronder zal ik kort uitleggen wat er nodig is om dark mode te gebruiken binnen je eigen website. Hierbij is wel enige kennis van HTML en CSS3 vereist.

Hoe voeg ik dark mode toe aan mijn website?

Hoe toepassen van dark mode stelt opzich zelf niet zo veel voor. Voor dark mode wordt gebruik gemaakt van de CSS3 Media Query “prefers-color-scheme“. Wanneer je deze naar onderstaand voorbeeld toepast en hierin je gewenste opmaak van je donkere website toepast, heb je een goede eerste stap gezet. Over het algemeen heb je alleen “prefers-color-scheme: dark” nodig. De light variant is over het algemeen de standaard weergave.

@media (prefers-color-scheme: dark) {
  body {
    background-color: #202020;
    color: #eeeeee;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: #efefef;
    color: #202020;
  }
}

Welke kleuren moet ik gebruiken voor dark mode?

Als basiskleuren voor de Dark mode variant van de website raad ik de kleur #202020. Deze kleur is namelijk niet te donker, maar wel donker genoeg om neutraal over te komen. De kleur van de tekst is iets donkerder dan wit. Dit om dezelfde reden, het zachter over komen van de kleuren. Je wilt toch niet dat de witte letters inbranden op je ogen.

Vragen over dark mode?

Mocht je na het lezen van dit artikel nog vragen hebben of hulp nodig hebben bij het toepassen van een donkere modus in je eigen website dan kun je altijd contact met me opnemen.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *