La spécification CSS est en constante évolution. Le processus de mise en œuvre de nouvelles fonctionnalités dans le CSS est compliqué : pour faire simple, disons qu’un groupe de travail CSS décide des nouveaux éléments à ajouter à la spécification. Il appartient ensuite aux navigateurs de mettre en œuvre ces nouveaux éléments, et les navigateurs choisissent dans quel ordre les mettre en œuvre, ce qui explique pourquoi nous avons maintenant un décalage dans la prise en charge des nouvelles fonctionnalités. Bien que cela puisse être parfois ennuyeux, c’est une bien meilleure façon de procéder, plutôt que si les navigateurs mettaient en œuvre d’un seul coup la spécification complète, comme nous l’avons vu dans les premiers temps du web.
Le groupe de travail CSS est composé de membres de tous les principaux fournisseurs de navigateurs et d’autres sociétés technologiques comme Apple ou Adobe. Apple voulait trouver un moyen de détecter son nouveau mode sombre dans le navigateur. Pour ce faire, la firme de Cupertino a poussé une recommandation à la spécification pour une nouvelle requête de média de niveau 5.
@media (prefers-color-scheme: light | dark)
{ … }
Grâce à cette media query, nous pouvons détecter si l’utilisateur utilise actuellement le mode clair ou foncé dans son système d’exploitation.
Il y a plusieurs façons d’utiliser cette nouvelle requête CSS pour mettre en œuvre différents thèmes. Nous allons en explorer trois dans ce tutoriel !
Découvrez comment bien utiliser le mode sombre dans votre design grâce à l’article de Graphiste.com : Web design : le guide du mode sombre
La fonction « Préférences de couleurs » pour gérer le dark mode
Étape 1 : Ajout de la fonction « Préférences de couleurs »
@media (prefers-color-scheme: dark) {
/* custom css */
}
Étape 2 : Texte clair sur fond sombre
L’une des modifications les plus importantes est celle qui supplante la couleur de fond et la couleur du texte :
body {
background-color : #1c1c1e ;
color : #fefefe ;
}
Attention : Pour éviter que le texte ne ressorte trop, et pour lui donner un aspect plus subtil lorsqu’il est en mode sombre, il est recommandé d’éviter le blanc pur pour le texte. De même, il est plus sage d’éviter d’utiliser le noir pur pour le fond.
Étape 3 : Désaturer les couleurs
Les couleurs d’accent sur un fond blanc (utilisées par exemple pour les liens) peuvent apparaître plus vives sur un fond sombre, selon la couleur que vous utilisez actuellement. Si c’est le cas, désaturez la couleur d’origine en une couleur moins saturée.
a {
color : #5fa9ee ;
}
Les images ont également tendance à apparaître plus vives et, selon un sondage, la majorité des gens ont préféré des images désaturées en mode sombre.
img {
filter: grayscale(20%);
}
Code final
@media (prefers-color-scheme: dark) {
body {
background-color: #1c1c1e;
color: #fefefe;
}
a {
color: #5fa9ee;
}
img {
filter: grayscale(20%);
}
}
Cette approche modifie les principales composantes, mais pas toutes ! En fonction du style et du thème de votre site, il y aura différentes autres class/id que vous devrez également modifier dans votre @media (Prefers-color-scheme: dark) pour passer complètement du mode clair au mode foncé.
Attention : Ce que nous venons de faire fonctionne parfaitement bien sur des sites web de taille modeste. Cependant, cette méthode serait un cauchemar à gérer sur un projet plus important, avec beaucoup d’éléments différents qui doivent tous être prioritaires.
Il existe une autre approche que nous allons détailler maintenant.
À lire aussi : Comment choisir le bon contraste de couleurs sur son site ?
Utilisez un filtre CSS pour activer le mode sombre
L’une des valeurs que nous pouvons utiliser avec les filtres CSS est invert. En effet, elle vous offre la possibilité de simplement appliquer cette valeur au HTML et inverser toutes les couleurs, ce qui donnerait un « mode sombre ».
@media (prefers-color-scheme: dark) {
html {
filter: invert(100%);
}
}
Attention : Bien que la méthode « filter » fonctionne avec le contenu que nous avons dans notre document, elle n’est pas encore très efficace. L’ombre de certains éléments, par exemple, se trouve également inversée. Nous avons perdu le contrôle des styles, ce qui devient un problème encore plus important lorsque vous avez des arrière-plans colorés. Nous avons également un tout nouveau problème à prendre en compte lorsqu’il s’agit d’images. En effet, celles-ci se retrouvent également inversées, offrant un retour involontaire au temps de l’argentique et des négatifs.
À lire aussi : Accessibilité : le guide complet pour améliorer votre site internet
Passez votre site en dark mode grâce aux Custom properties
Les méthodes que nous avons explorées jusqu’à maintenant sont susceptibles de vous faire perdre le contrôle des styles, ou bien nécessitent beaucoup de maintenance pour vous assurer que tout est mis à jour en mode sombre.
Une autre façon d’aborder la question existe : il vous suffit d’utiliser des « custom properties » pour définir vos couleurs et les remplacer par une « media query ».
Afin d’utiliser les custom properties, vous devez la définir au sommet de votre CSS à l’intérieur de l’élément :root.
:root {
--background-color: #ededed;
--page-background: #fff;
--text-color: #212121;
--color-alpha: #c3423f;
}
Pour utiliser une propriété personnalisée, utilisez la syntaxe var(--custom-property-name).
body {
background-color: var(--background-color);
color: var(--text-color);
}
.content-container {
background-color: var(--page-background);
}
.text--alpha {
color: var(--color-alpha);
Vous pouvez maintenant ajouter à nouveau la « media query », en passant cette fois outre les valeurs des « custom property » qui s’y trouvent. Vous la placerez juste après la définition de :root, et à l’intérieur de la requête média. Ainsi, vous pouvez simplement choisir de nouvelles valeurs pour toutes les couleurs du mode sombre.
@media (prefers-color-scheme: dark) { :root {
--background-color: #111;
--page-background: #212121;
--text-color: #ededed;
--color-alpha: #50a8d8;
}
}
Grâce à cette méthode, vous gardez le contrôle de toute la feuille de style. Les images par exemple, ne seront pas affectées : libre à vous de les désaturer légèrement !
Vous pouvez également faire appel à un webdesigner freelance pour passer votre site internet en mode sombre en toute sécurité. Recevez rapidement de nombreux devis en postant votre projet gratuitement sur Codeur.com !
À lire aussi : Apprendre le CSS : les bases
