Comment Créer un Dark Mode CSS ?

Vous voulez ajouter un mode sombre à votre site web ? Vous pensez que c’est compliqué et que ça demande beaucoup de code ? Le dark mode est de plus en plus demandé par les utilisateurs pour le confort des yeux et pour économiser la batterie.

Ce guide vous montre comment créer un dark mode en CSS, sans une seule ligne de JavaScript. On va utiliser une méthode simple et moderne pour que votre site s’adapte automatiquement aux préférences de l’utilisateur, étape par étape.

L’approche moderne : la media query `prefers-color-scheme`

La façon la plus directe de créer un dark mode est d’utiliser une `media query` spéciale : `prefers-color-scheme`. Cette ligne de code demande simplement au navigateur de l’utilisateur : « Est-ce que l’utilisateur a réglé son téléphone ou son ordinateur en mode sombre ? ».

Si la réponse est oui, le navigateur applique un bloc de CSS spécifique. C’est une détection automatique qui se base sur les préférences du système d’exploitation. Vous n’avez rien à gérer manuellement. La syntaxe est simple et s’intègre directement dans votre fichier CSS existant.

/* Style de base (mode clair) */
body {
  background-color: #FFFFFF;
  color: #121212;
}

@media (prefers-color-scheme: dark) {
  /* Styles pour le dark mode */
  body {
    background-color: #121212;
    color: #FFFFFF;
  }
}

Ce code dit au navigateur d’appliquer les premiers styles par défaut (le mode clair). Mais si le navigateur détecte le mode sombre, il applique les styles à l’intérieur du bloc `@media (prefers-color-scheme: dark)` et écrase les styles par défaut.

La méthode experte : un thème scalable avec les variables CSS

La première méthode fonctionne, mais elle est vite limitée. Si vous avez 50 éléments différents à modifier (liens, boutons, titres…), vous allez devoir dupliquer 50 règles dans votre bloc `@media`. Ça devient vite difficile à maintenir.

Pour faire ça proprement, on utilise des variables CSS (aussi appelées `custom properties`). L’idée est de définir toutes vos couleurs à un seul endroit. Pour basculer entre le mode clair et le mode sombre, vous n’aurez qu’à changer la valeur de ces variables, pas toutes les règles CSS.

Étape 1 : Définir les couleurs du thème par défaut sur `:root`

Le sélecteur `:root` représente la racine de votre document (l’élément « ). C’est le meilleur endroit pour déclarer des variables qui seront accessibles partout sur votre site. On commence par définir les couleurs pour le mode clair.

:root {
  --background-color: #FFFFFF;
  --text-color: #121212;
  --link-color: #007BFF;
}

Étape 2 : Surcharger les variables pour le dark mode

Maintenant, on reprend notre `media query` de tout à l’heure. Mais au lieu de cibler chaque élément un par un, on va juste redéfinir les valeurs des variables à l’intérieur du `media prefers-color-scheme dark root`. C’est tout.

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #FFFFFF;
    --link-color: #64B5F6;
  }
}

Étape 3 : Appliquer les variables dans le reste du CSS

La dernière étape est d’utiliser ces variables partout dans votre CSS avec la fonction `var()`. L’énorme avantage, c’est que ce code fonctionne pour les deux thèmes. Il n’a plus besoin de modifications. Le navigateur choisira la bonne valeur de variable tout seul.

Si vous souhaitez approfondir le sujet des variables, la documentation officielle de MDN sur les propriétés personnalisées est une ressource très complète.

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

h1, h2, h3 {
  color: var(--text-color);
}

Cette approche est beaucoup plus scalable et facile à maintenir. Si demain vous voulez changer la couleur de vos liens en dark mode, vous ne modifiez qu’une seule ligne dans votre bloc `prefers-color-scheme dark`.

Astuces avancées : gérer les images et les bordures

Un problème courant en dark mode, ce sont les images, surtout les logos noirs sur fond transparent. Ils peuvent devenir invisibles sur un fond sombre. De même, les ombres portées (`box-shadow`) pensées pour un fond clair peuvent mal rendre.

Pour un ajustement rapide sur des icônes simples, vous pouvez utiliser un filtre CSS pour inverser les couleurs de l’image uniquement en dark mode.

@media (prefers-color-scheme: dark) {
  .logo {
    filter: invert(1) hue-rotate(180deg);
  }
}

Attention, cette technique n’est pas parfaite. Elle inverse toutes les couleurs de l’image, ce qui peut donner des résultats étranges sur des photos complexes. La meilleure solution reste souvent d’avoir deux versions de votre logo (une pour le mode clair, une pour le sombre) et de les afficher selon le contexte.

Pour les autres éléments comme les bordures ou les `box-shadow`, la règle est la même : utilisez des variables CSS pour les définir. Ça vous assure que tous les éléments de votre design s’adaptent correctement.

FAQ – Créer un Dark Mode en CSS

Voici les réponses aux questions les plus fréquentes sur la création d’un mode sombre.

`prefers-color-scheme` est-il compatible partout ?

Oui, la compatibilité est excellente. Cette media query est supportée par tous les navigateurs modernes :

• Chrome
• Firefox
• Safari
• Edge

Vous pouvez donc l’utiliser sans craindre de laisser de côté une grande partie de vos visiteurs.

Comment ajouter un bouton pour changer de thème ?

Pour permettre à l’utilisateur de forcer le mode clair ou le mode sombre manuellement, vous aurez besoin d’un peu de JavaScript. Le CSS seul ne peut pas réagir à un clic sur un bouton.

La façon de faire est la suivante :

1. Votre JavaScript ajoute ou retire une classe CSS (par exemple `.dark-mode`) sur l’élément «  quand on clique sur le bouton.
2. Votre CSS définit les variables du dark mode non plus dans un `@media`, mais dans cette classe : `:root.dark-mode { … }`.

Quelle est la meilleure couleur de fond pour un dark mode ?

Il faut éviter le noir pur (`#000000`). Le contraste avec le texte blanc est très élevé et peut créer de la fatigue oculaire, surtout lors d’une lecture prolongée.