Dark mode en CSS natif : thème sombre automatique, mode manuel, aucun composant à réécrire

Votre visiteur a réglé son système en thème sombre, et votre site continue de lui servir un fond blanc, parce que rien dans la feuille de style ne lit cette préférence. Ce cours ajoute le dark mode au fichier modele-style.css construit dans les épisodes précédents : détection automatique avec le media query prefers-color-scheme, choix manuel par un attribut data-theme qui prend le dessus sur le réglage système, images adoucies, ombres adaptées et transitions fluides entre les deux thèmes. Tout passe par les tokens sémantiques, si bien qu'aucun composant n'a besoin d'être réécrit.

Dark mode CSS : ce que vous saurez faire

Chaque étape est montrée dans le navigateur, en basculant le réglage système de Chrome entre clair et sombre.

• Lire la préférence de thème du système sans une ligne de JavaScript
• Trier les tokens qui changent en mode sombre de ceux qui restent fixes
• Forcer un thème clair ou sombre quel que soit le réglage système
• Piloter la luminosité des images par un token dédié
• Adoucir le passage d'un thème à l'autre avec vos tokens d'animation
• Documenter chaque niveau de tokens pour relire le fichier des mois plus tard

Ce qui change en mode sombre, et ce qui ne doit surtout pas bouger

L'erreur classique consiste à dupliquer toute la feuille de style pour le thème sombre. Le cours fait l'inverse : seules les couleurs d'interaction, d'état, de surface, de texte et de bordure sont redéfinies, avec les ombres et la luminosité des images. Typographie, espacements et rayons ne sont pas touchés. Les nouvelles valeurs ne sont pas des codes hexadécimaux saisis à la main mais d'autres primitives de la palette déjà en place, celle posée dans l'épisode sur les variables CSS et les design tokens. Le :root est redéfini une première fois dans le media query, puis une seconde fois derrière les sélecteurs [data-theme="dark"] et [data-theme="light"], posés sur la balise html pour qu'un futur bouton puisse imposer un thème.

Images trop lumineuses et bascule trop sèche : deux détails qui font la différence

Sur fond sombre, une photo gardée à pleine luminosité agresse l'œil. Un filtre brightness piloté par un token img-brightness, à 1 en thème clair et abaissé en thème sombre, règle le problème sans retoucher les fichiers. Le changement de thème reçoit ensuite une transition sur la couleur, le fond, la bordure et l'ombre, en réutilisant les durées et les courbes d'accélération déjà déclarées dans les primitives. Le cours se termine en remplissant la couche utilities avec les classes sr-only et skip link, puis annonce la suite : le bouton de bascule et sa mémorisation seront l'objet de l'épisode suivant.

Pour qui

Le badge Intermédiaire est justifié : vous écrivez déjà du CSS sans aide et vous savez ce qu'est une variable. C'est le cinquième épisode d'une série sur le CSS moderne, et il repart du fichier modele-style.css avec ses couches @layer, son nommage BEM et ses deux niveaux de tokens. Si ce fichier ne vous dit rien, commencez par l'épisode sur les variables CSS, qui le construit. Uniquement du CSS natif, sans préprocesseur, écrit dans Visual Studio Code et testé dans un navigateur à jour. Les fichiers HTML et le modele-style.css enrichi sont fournis.

Pour aller plus loin

Si vous visez un cadre certifiant avec un mentor, Carl Brison encadre la formation Développeur Web Front-End éligible au CPF, dont le programme comprend la mise en place d'un mode sombre.