Navigation

Toutes les catégories

Voir les derniers articles

CSS : Comment passer votre site en mode sombre ?

La spécification CSS est en constante évolution. Le processus de mise en œuvre de nouvelles fonctionnalités dans le CSS est...

Publié par Sebastien Turbe

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

wikipedia mode nuit

É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 sage d’éviter d’utiliser le noir pur pour le fond.

É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é.

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.

Utiliser un filtre CSS pour activer le mode sombre

mode nuit graphiste

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 %) ;
}
}
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, comme si on nous étions retourné au temps de l’argentique et des négatifs.

 

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

messenger application mode sombre

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 ;
}
}
Le résultat
Grâce à cette méthode, nous gardons 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 la suite de l'article
Afficher les commentaires (0)

Commentaires

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Webmarketing

Facebook : 2 filtres « Instagram » débarquent sans recourir au savoir-faire de la filiale

La claque WebActus du jour : 1 mois à peine après le rachat pour un milliard de dollar de la start-up spécialisée dans la customisation de photos, Facebook met en place les...

Publié le par Team WebActus
Webmarketing

Marketing digital : comment les professionnels appréhendent 2019

Adobe a réalisé une enquête internationale auprès de 12 815 professionnels du marketing, de la publicité, de l’e-commerce et de...

Publié le par Cyrielle Maurice