Carnet

Soutien du mode sombre dans votre site Internet

Content

Pour les utilisateurs qui préfèrent une interface sombre, que ce soit pour l'esthétique ou pour éviter de se fatiguer les yeux, chaque application ou chaque site Internet pouvait offrir, avec des mécanismes plus ou moins simple, un choix de teinte de couleur pour l’interface ou le contenu.

Photoshop offre cette fonctionnalité depuis plusieurs années directement dans ses préférences, offrant même plusieurs teintes.

Certains sites Internet offre une ou plusieurs versions grâce à un simple clic de souris. Ceci permet d’améliorer l’accessibilité à ses sites en offrant des contrastes différents que les lecteurs peuvent activer selon leurs besoins.

Certains systèmes d'opération offrent la possibilité de changer le thème au complet. Mais cela n'était pas le cas pour le macOS, Apple bloquant même les outils externes de changer le visuel, et ce, jusqu'à tout récemment. Avec le macOS 10.14, Apple a enfin lancé le « Dark Mode », soit le mode sombre, qui peut être activé ou non, d'un simple clic de souris.

Mais qu’advient-il du mode foncé pour le contenu des sites Internet? Apple maintenant propose aux développeurs un nouveau sélecteur media :

@media (prefers-color-scheme:dark)

 

De la même manière que toute autre sélecteur de media, on peut donc définir une version régulière des couleurs et une version sombre :

:root {
  background-color: #fff;
}

@media (prefers-color-scheme:dark) {
  :root {
    background-color: #050505;
  }
}

Référence :
https://webkit.org/blog/8475/release-notes-for-safari-technology-preview-68/

Catégorie