Blog

La spécification CSS évolue constamment. Le processus d’implémentation de nouvelles fonctionnalités en CSS est compliqué : pour faire simple, disons qu’un groupe de travail CSS décide quels nouveaux éléments ajouter à la spécification. Il appartient ensuite aux navigateurs d’implémenter ces nouveaux éléments, et les navigateurs choisissent dans quel ordre les implémenter, c’est pourquoi nous avons maintenant un décalage dans la prise en charge des nouvelles fonctionnalités. Bien que cela puisse parfois être ennuyeux, c’est une bien meilleure façon de procéder, plutôt que des navigateurs implémentant la spécification complète en une seule fois, comme nous l’avons vu aux débuts 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 au cahier des charges pour une nouvelle requête média de niveau 5.

@media (prefers-color-scheme: light | dark)
{ … }

En utilisant cette requête multimédia, nous pouvons détecter si l’utilisateur utilise actuellement le mode clair ou sombre dans son système d’exploitation.

Il existe plusieurs façons d’utiliser cette nouvelle requête CSS pour implémenter différents thèmes. Nous en explorerons trois dans ce tutoriel !

Découvrez comment bien utiliser le dark mode dans votre design grâce à l’article de Graphiste.com : Webdesign : le guide du mode sombre

La fonction « Préférences de couleur » pour gérer le mode sombre

Étape 1 : Ajout de la fonction « Préférences de couleur »

@media (prefers-color-scheme: dark) {
/* custom css */
}

Étape 2 : Texte clair sur fond sombre

L’un des changements les plus importants est celui qui remplace la couleur d’arrière-plan et la couleur du texte :

body {
background-color : #1c1c1e ;
color : #fefefe ;
}

Avertissement : Pour éviter que le texte ne ressorte trop et pour le rendre plus subtil 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 du noir pur pour le fond.

Étape 3 : désaturer les couleurs

Les couleurs d’accentuation sur un fond blanc (utilisées pour les liens, par exemple) 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 préfèrent les images désaturées en mode sombre.

img {
filter: grayscale(20%);
}

Code définitif

@media (prefers-color-scheme: dark) {
body {
background-color: #1c1c1e;
color: #fefefe;
}
a {
color: #5fa9ee;
}
img {
filter: grayscale(20%);
}
}

Cette approche modifie les principaux composants, mais pas tous ! Selon le style et le thème de votre site, il y aura différentes autres classes/ids que vous devrez également changer dans votre @media (Prefers-color-scheme: dark) pour passer complètement du mode clair au mode sombre.

Attention : ce que nous venons de faire fonctionne parfaitement sur des sites de taille modeste. Cependant, cette méthode serait un cauchemar à gérer sur un projet plus vaste, avec de nombreux éléments différents qui doivent tous être prioritaires.

Il existe une autre approche que nous allons détailler maintenant.

A lire aussi : Comment choisir le bon contraste de couleurs sur votre site ?

Utiliser un filtre CSS pour activer le mode sombre

L’une des valeurs que nous pouvons utiliser avec les filtres CSS est invert. En effet, il vous offre la possibilité d’appliquer simplement cette valeur au HTML et d’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, est é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 en ce qui concerne les images. En effet, ceux-ci se retrouvent aussi inversés, offrant un retour involontaire au temps du film et des négatifs.

A lire aussi : Accessibilité : le guide complet pour améliorer votre site web

Mettez votre site en mode sombre avec les propriétés personnalisées

Les méthodes que nous avons explorées jusqu’à présent risquent de vous faire perdre le contrôle des styles, ou bien nécessitent beaucoup de maintenance pour s’assurer que tout est mis à jour en mode sombre.

Une autre façon d’aborder la question existe : il vous suffit d’utiliser des « propriétés personnalisées » pour définir vos couleurs et de les remplacer par une « requête média ».

Pour utiliser les propriétés personnalisées, vous devez les définir en haut 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 « requête média », en contournant cette fois les valeurs des « propriétés personnalisées » qui s’y trouvent. Vous le placerez juste après la définition de :root, et à l’intérieur de la requête multimédia. Vous pouvez donc 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;
}
}

Avec cette méthode, vous gardez le contrôle de l’ensemble de 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 appeler un webdesigner indépendant pour passer en toute sécurité votre site Web en mode sombre. Recevez rapidement de nombreux devis en publiant gratuitement votre projet sur codeur.com !

A lire aussi : Apprendre le CSS : les bases