Je vais vous parler de thèmes sombres, appelés dark mode. On va voir ce que c'est, pourquoi il est intéressant d'en ajouter un à son site Internet, et comment le développer avec l'aide de variables CSS.

Regarder la vidéo sur YouTube

Cet article est la 4e partie d'une série qui explique comment réaliser un site Internet de A à Z. Vous n'avez pas besoin d'avoir lu ou vu les parties précédentes pour comprendre cette partie. Les autres épisodes sont disponibles ici.

Si vous ne pouvez pas regarder la vidéo, un compte rendu est proposé plus bas.

Résumé de la vidéo

Lorsqu'on réalise un site Web, on essaie de développer une interface qui s'adapte à tous les utilisateurs, qu'ils soient sur un ordinateur fixe avec un grand écran, sur une tablette avec un écran de taille moyenne, ou sur un téléphone portable avec un écran plus petit.

On peut aller cran plus loin et essayer de s'adapter aux préférences de l'utilisateur. On pourrait proposer une interface entièrement personnalisable, en termes de couleurs, mais cela demanderait beaucoup de travail. Nous allons donc proposer deux thèmes : un thème clair et un thème sombre.

Light mode vs Dark mode

La majorité des sites proposent uniquement un thème clair, c'est-à-dire utilisent un fond de couleur blanche et des textes noirs. Depuis quelques mois, à la demande des utilisateurs, plusieurs sites populaires comme Twitter, Instagram, ou Microsoft Office, ont commencé à ajouter un deuxième thème, plus sombre, en utilisant un fond sombre avec des textes de couleurs plus claires.

Plusieurs raisons expliquent cet engouement pour les thèmes sombres :

  • Les couleurs sombres peuvent être plus reposantes pour les yeux, car le contraste entre les couleurs est moins important;
  • Les couleurs sombres peuvent être mieux perçues par certains utilisateurs, notamment ceux possédant une vision réduite;
  • Les couleurs sombres consomment moins d'énergie.
  • Les couleurs sombres peuvent être plus esthétiques.

Les thèmes sombres sont aussi devenus plus populaires parce que les iPhone et les téléphones sous Android permettent de changer automatiquement le thème de l'appareil et des pages visitées selon l'heure de la journée, ou l'heure de lever ou de coucher du soleil. Les utilisateurs peuvent ainsi profiter d'une luminosité réduite le soir, et utiliser des couleurs moins aggressives pour les yeux.

Les ordinateurs sous Windows permettent aussi d'utiliser un thème sombre.

On peut, par exemple, faire le test sur un des sites que j'édite et dont je vous ai déjà parlé plein de fois maintenant : eWatchers.org. Allez sur ce site en configurant votre appareil avec un thème clair, puis modifiez la configuration de votre appareil avec un thème sombre, et étudiez la différence.

Nous allons ajouter un thème sombre similaire à notre site.

Fonctionnement des variables CSS

Pour développer un thème sombre, nous allons utiliser des variables CSS.

Les variables CSS fonctionnent comme des variables classiques, que l'on trouve dans les autres langages de programmation comme JavaScript, Python, PHP, etc. Ces variables ont un nom et une valeur, qui peut évoluer, ou non, dans le temps.

Pour comprendre leur fonctionnement, on peut réaliser un petit exemple, qui consiste à réaliser une page dont la couleur de fond change en fonction de la taille du navigateur : bleu si le navigateur a une largeur supérieure à 700px, rouge sinon.

Sans utiliser de variables CSS, la page serait la suivante :

<html>
<head>
  <style>
    body {
      background-color: blue;
    }

    @media (max-width: 700px) {
      body {
        background-color: red;
      }
    }
  </style>
</head>
<body>
</body>
</html>

Avec des variables CSS, le même résultat serait le suivant :

<html>
<head>
  <style>
    :root {
      --couleur-fond: blue;
    }

    @media (max-width: 700px) {
      :root {
        --couleur-fond: red;
      }
    }

    body {
      background-color: var(--couleur-fond);
    }
  </style>
</head>
<body>
</body>
</html>

Sans les variables CSS, la déclaration background-color: xxx; est repétée avec une valeur différente. Avec des variables CSS, la déclaration est unique mais la valeur associée est mise à jour.

Nous pouvons utiliser ce concept pour créer un thème sombre pour notre site.

Ajouter un thème sombre avec des variables CSS

On peut reprendre la page que l'on a réalisé dans les étapes précédentes et définir autant de variables CSS qu'il y a de couleurs dans nos pages.

Toutes ces variables sont ajoutées en haut de notre feuille de style principale :

:root {
  --color-white: #fff;
  --color-black: #000;
  --color-mine: #333;
  --color-tundora: #4D4D4D;
  --color-scorpion: #595959;
  --color-dove: #737373;
  --color-gallery: #efefef;
  --color-alabaster: #fafafa;
}

Le nom des variables a été généré à l'aide de ce site : https://chir.ag/projects/name-that-color

Nous aurions pu aussi appeler les couleurs par des noms génériques comme : couleur-noir, couleur-gris, couleur-gris-clair, couleur-gris-tres-clair, etc.

On peut maintenant créer un deuxième jeu de couleurs adapté à un thème sombre. Ces variables seront inclues dans une déclaration spécifique (@media (prefers-color-scheme: dark)), qui sera prise en compte seulement lorsque l'utilisateur a activé le thème sombre dans les paramètres de son appareil : 

@media (prefers-color-scheme: dark) {
  :root {
    --color-white: #252525;
    --color-black: #E6E6E6;
    --color-mine: #B3B3B3;
    --color-tundora: #8C8C8C;
    --color-scorpion: #B3B3B3;
    --color-dove: #B3B3B3;
    --color-gallery: #4D4D4D;
    --color-alabaster: #333;
  }
}

On peut tester à présent ces couleurs en modifiant les paramètres de notre appareil et voir le résultat.

Note: Le prochain épisode est disponible ici et le précédent ici.