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 et 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 maintenant en explorer 3 dans ce tutoriel.

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 ;
}

Étape 3 : Désaturer les couleurs

Les couleurs d’accent (utilisées par exemple pour les liens) sur un fond blanc 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 de votre site, et de son thème, 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é.

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

Utiliser un filtre CSS pour activer le mode sombre

L’une des valeurs que nous pouvons utiliser avec les filtres CSS est invert. Nous pourrions donc simplement appliquer cette valeur au HTML et inverser toutes les couleurs, ce qui nous donnerait un « mode sombre ».

@media (prefers-color-scheme : dark) {
html {
filter : invert(100 %) ;
}
}

Passer votre site en dark mode grâce aux Custom properties

Les méthodes que nous avons explorées nous font soit perdre le contrôle des styles, soit nécessitent beaucoup de maintenance pour s’assurer que tout est mis à jour en mode sombre. Il y a une autre façon d’aborder la question : utiliser des « custom properties » pour définir nos couleurs et les remplacer par une  « media query ».

Afin d’utiliser les custom properties, nous les définissons au sommet de notre 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, nous utilisons 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) ;

Nous pouvons maintenant ajouter à nouveau la « media query », en passant cette fois outre les valeurs des « custom property » qui s’y trouvent. Nous la placerons juste après la définition de  :root, et à l’intérieur de la requête média, nous pouvons maintenant 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 ;
}
}

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.