Passer un site internet en mode sombre

Home / DEVELOPPEMENT / Passer un site internet en mode sombre
23Nov

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;
}
}
Vous gardez alors le contrôle de votre feuille de style en n’impactant pas les feuilles de style
Vous pouvez également faire appel à notre agence Instants Web pour passer votre site en mode sombre.

Laisser un commentaire

A propos de nous

Notre agence crée le site internet qui vous ressemble - un véritable accompagnement et des solutions adaptées à vos besoins en terme de visibilité sur internet ainsi que sur les réseau sociaux

Derniers articles

novembre 25th, 2020 08:55
novembre 25th, 2020 08:57

Contactez-nous

Pour tous vos projets digitaux, contactez-nous pour nous expliquer vos demandes et vos attentes.

Copyright © 2020-2021  Tous droits réservés. Site développé par  Instants-web,

Politique de confidentialité