Gérer les thèmes clair/sombre en HTML et CSS : solution native

Ce second article du guide est consacré à la gestion des thèmes clair/sombre en HTML et CSS, sans avoir recours à JavaScript. Nous allons voir comment exploiter les fonctionnalités natives du web pour adapter automatiquement l'apparence d’un site en fonction des préférences système de l’utilisateur : couleurs, images, favicons, ou encore barre de navigation mobile.
Objectif : proposer une expérience cohérente, performante et accessible, dès le chargement de la page.

I. HTML : Structurer et optimiser pour les thèmes Light/Dark

Si le HTML n'est pas directement responsable de l'apparence visuelle, il joue néanmoins un rôle important dans la gestion des thèmes clair et sombre, en posant les fondations nécessaires pour que CSS et JavaScript puissent prendre le relais efficacement. Plusieurs balises spécifiques permettent d'adapter l’expérience utilisateur en fonction des préférences système ou des actions manuelles, tout en améliorant l’accessibilité et l’intégration système.

1. Personnaliser la couleur de la barre de navigation mobile

L’ajout de balises <meta name="theme-color"> permet de définir la couleur de la barre supérieure du navigateur sur les appareils mobiles, en particulier sur Android. Cette couleur peut également être dynamique, selon le thème préféré de l’utilisateur :

<!-- Couleur pour le thème clair -->
<meta name="theme-color" content="#0e93f0" media="(prefers-color-scheme: light)">

<!-- Couleur pour le thème sombre -->
<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">

Cette approche améliore l’immersion visuelle de l’utilisateur, en harmonisant l’interface web avec les éléments natifs du système. Cela participe aussi à une meilleure cohérence de marque sur mobile, surtout pour les PWA (Progressive Web Apps).

2. Utiliser un favicon spécifique pour le mode sombre

Dans un souci de lisibilité et d’esthétique, il est pertinent de fournir une version alternative du favicon pour les utilisateurs en thème sombre. Certains icônes clairs peuvent devenir invisibles ou peu visibles sur un fond d’onglet sombre. Heureusement, HTML permet de définir un favicon conditionnel à l’aide de l’attribut media.

<!-- Favicon par défaut (clair) -->
<link rel="icon" href="/favicon-light.svg" type="image/svg+xml">

<!-- Favicon pour le thème sombre -->
<link rel="icon" href="/favicon-dark.svg" type="image/svg+xml" media="(prefers-color-scheme: dark)">

Il n’est pas nécessaire de spécifier une version explicite pour le thème clair : le navigateur chargera automatiquement la version par défaut, sauf si une règlemedia spécifique pour le sombre est détectée. Cela allège le code et améliore la compatibilité.

3. Proposer des images alternatives pour le thème sombre

Certaines images intégrées au contenu (logos, illustrations, captures d’écran stylisées, etc.) peuvent devenir illisibles en thème sombre, surtout si elles contiennent des éléments clairs ou un fond transparent. Pour éviter cela et conserver une interface cohérente visuellement, il est conseillé de prévoir une version alternative pour le mode sombre.

Grâce à la balise <picture>, HTML permet de charger dynamiquement une image différente en fonction des préférences de thème de l’utilisateur.

<picture>
  <source srcset="/images/logo-dark.png" media="(prefers-color-scheme: dark)">
  <img src="/images/logo-light.png" alt="Logo du site">
</picture>

Le navigateur choisira automatiquement l’image adaptée au contexte :

• Si l’utilisateur est en thème clair, il affichera la version par défaut (logo-light.png)
• Si son système est configuré en thème sombre, il utilisera l’image définie via l’attribut media

Il n’est pas nécessaire de spécifier une image spécifique pour le mode clair : comme pour les favicons, la version définie dans la balise <img> fera office de fallback si aucune règle media ne s’applique.

Cette méthode garantit une expérience visuelle optimale, sans JavaScript, et reste compatible avec l’approche progressive du dark mode.

4. Accessibilité et contrôles utilisateur

Lorsque l’on propose un bouton permettant de changer le thème manuellement, il est essentiel de penser à l’accessibilité. Le bouton devrait utiliser une balise sémantique comme <button> et inclure un libellé clair grâce à un attribut aria-label.

<button aria-label="Activer le mode sombre">🌓</button>

L’attribut aria-label est ici essentiel pour des raisons d’accessibilité. Il fournit une description textuelle invisible aux lecteurs d’écran ou aux technologies d’assistance. Sans cet attribut, un utilisateur non-voyant n’aurait aucune idée de la fonction du bouton (surtout si le bouton contient uniquement une icône). En décrivant l’action clairement, comme « Changer de thème », on assure une expérience inclusive à tous les utilisateurs.

L’ajout d’un bouton nécessite ensuite une gestion via JavaScript (que nous aborderons dans la 3ème partie de ce guide), mais le HTML doit dès le départ être pensé pour être compréhensible, manipulable et accessible.

II. CSS : Styliser efficacement les thèmes Light/Dark

Le CSS est la pièce maîtresse de la gestion des thèmes clair et sombre. Il permet de modifier dynamiquement les couleurs, contrastes, arrière-plans et autres propriétés visuelles en fonction des préférences de l’utilisateur ou de l’interface système. Cette section montre comment construire un système de thème propre, maintenable, et évolutif.

1. Définir les couleurs via des variables CSS (custom properties)

Plutôt que de répéter les couleurs dans chaque règle, il est préférable de centraliser les définitions avec des variables CSS. Cela permet de rendre les changements de thème plus faciles à maintenir :

:root {
	--bg-color: #f0f0f0;
	--text-color: #121212;
}

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

2. Utiliser prefers-color-scheme pour détecter le thème système

La media query @media (prefers-color-scheme) permet de détecter si l’utilisateur utilise un thème sombre ou clair dans son système d’exploitation. Cela permet d’adapter automatiquement l’apparence de ton site ou application sans aucune intervention JavaScript.

@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #121212;
		--text-color: #f0f0f0;
	}
}

C’est l’approche la plus simple pour prendre en compte les préférences utilisateur, et elle est largement supportée par les navigateurs modernes. Pour cela, on va utiliser la propriété CSS filter :

3. Adapter les images avec des filtres CSS

Il est possible d’utiliser des filtres CSS pour adapter une même image aux thèmes clair et sombre sans avoir à fournir plusieurs versions du fichier :

<img src="image.jpg" class="theme-adaptive" alt="Image filtrée selon le thème">

.theme-adaptive {
    transition: filter 0.3s ease;
}

@media (prefers-color-scheme: dark) {
    .theme-adaptive {
        filter: brightness(0.8) contrast(1.2);
    }
}

Attention : méthode déconseillée dans la plupart des cas

Bien que cette astuce puisse dépanner, elle présente plusieurs limitations importantes :

• Peu de contrôle : le rendu peut varier fortement selon les couleurs, types d’image (photo, illustration, logo…).
• Pas toujours esthétique : les images peuvent paraître "délavées", trop sombres ou mal ajustées.
• Non accessible : les images importantes pour l’expérience ou la compréhension ne doivent pas reposer uniquement sur un filtre.

4. Transitions légères entre les thèmes

Pour éviter un changement brutal lors du basculement entre les thèmes, il est recommandé d'ajouter une transition :

body {
	transition: background-color 0.3s ease, color 0.3s ease;
}

Cela améliore considérablement l’expérience utilisateur, en rendant le changement plus fluide.

III. Conclusion

Grâce aux fonctionnalités natives de HTML et CSS, il est aujourd’hui possible de proposer un thème sombre élégant, performant et respectueux des préférences système de l’utilisateur, sans écrire une seule ligne de JavaScript. Cependant, cette approche reste limitée à un comportement automatique : elle ne laisse pas à l’utilisateur la possibilité de choisir ou de basculer manuellement d’un thème à l’autre.

C’est ce que nous allons aborder dans la suite de ce guide, où nous verrons comment gérer dynamiquement les thèmes avec JavaScript : bouton de bascule, mémorisation des préférences, adaptation des visuels et bien plus encore :
Gérer les thèmes clair/sombre : laisser le choix avec JavaScript