Passer un site internet en mode sombre

Le css est en constante évolution et les processus de mise en oeuvre ne sont pas évidentes à mettre en place. Les navigateurs doivent ensuite prendre en charge ses nouvelles spécifications et c'est pour cela que nous avons des décalages dans ces prises en charge. Voici déjà un bout de code que vous pouvez intégrer dans votre site pour savoir quel mode utilise l'internaute :

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

La première étape est de supplanter la couleur de fond et la couleur du texte grâce à ce code :

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

Nous vous conseillons d'utiliser la couleur blanc pur pour les textes et d'éviter le "solid black" pour le fond.

Ensuite il faudra désaturer les couleurs d'accent ( les liens par exemple) qui se trouvent sur fond blanc en une une couleur moins saturée avec ce code :

a {
color : #5fa9ee ;
}

Il faut faire de même pour les images de votre site en introduisant ce code :

img {
filter: grayscale(20%);
}

Ce code va permettre d'avoir une échelle de gris très légère et permettre d'avoir un contraste moins "agressif" des images

Voici donc le code final :

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

Ces approche ne modifie que certains éléments sur des sites de taille moyenne. Si vous avez un site plus "gros" il faudra bien sûr être plus précis sur vos modifications. Il existe d'ailleurs plusieurs approche que nous allons maintenant détailler :

Passer votre site en mode sombre grâce aux Custon properties

Les méthodes que nous avons expliquées plus haut dans cette articles demandent beaucoup de maintenance , il existe un technique pour réduire cette maintenance et s'assurer que tous les éléments soient en mode sombre de façon stable

Au début de votre css à l'intérieur de l'élément root vous placez le code suivant :

:root {
--background-color: #ededed;
--page-background: #fff;
--text-color: #212121;
--color-alpha: #c3423f;
}

Mais avant tout vous devez créer une proprièté personnalisée de ce type :

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 donc ajouter la "media query" en passant outre les valeurs des "costum property". Il vous suffit de placer la définition :root à l'intérieur de la requête medai query comme ceci :

@media (prefers-color-scheme: dark) {
:root {
--background-color: #111;
--page-background: #212121;
--text-color: #ededed;
--color-alpha: #50a8d8;
}
}