Depuis quelques années, le darkmode – ou mode sombre – est devenu une tendance incontournable du web design. Les grandes plateformes comme YouTube, Twitter ou encore GitHub l’ont adopté pour offrir à leurs utilisateurs une expérience plus agréable, notamment la nuit. Pourtant, beaucoup de développeurs pensent encore qu’il faut du JavaScript pour le mettre en place. En réalité, grâce à la puissance du CSS moderne, il est tout à fait possible de créer un darkmode sans une seule ligne de JavaScript.
Dans ce tutoriel complet, vous allez apprendre à comprendre, concevoir et intégrer un darkmode en CSS. Nous aborderons les principes de base, les avantages de cette approche, et surtout, la méthode pas à pas pour le mettre en place de manière simple, accessible et professionnelle. Que vous soyez débutant ou confirmé, ce guide vous accompagnera dans chaque étape avec des explications claires et des exemples concrets.
- Qu’est-ce que le Darkmode ?
- À quoi sert le Darkmode ?
- Les avantages du Darkmode
- Le principe du Darkmode en CSS pur
- Mettre en place un Darkmode 100 % CSS : méthode complète et expliquée
- Bien choisir ses couleurs sombres pour un darkmode réussi
- Comprendre la psychologie des couleurs sombres
- Ne pas se contenter du noir pur
- Trouver le bon contraste
- Utiliser des couleurs d’accentuation avec modération
- Respecter la hiérarchie visuelle
- Tenir compte des écrans et des environnements
- Harmoniser le darkmode avec le mode clair
- Exemple pratique : création d’une palette équilibrée
- Aller plus loin avec le Darkmode CSS : personnalisation et bonnes pratiques
Qu’est-ce que le Darkmode ?
Le darkmode, que l’on traduit en français par mode sombre, est une alternative visuelle à l’apparence claire par défaut d’un site web. Il consiste à inverser ou à assombrir les couleurs principales d’une interface afin de réduire la luminosité globale de l’écran. En d’autres termes, les fonds deviennent sombres (souvent noirs ou gris foncé), tandis que les textes et éléments interactifs deviennent clairs (blancs, gris ou colorés).
Techniquement, il ne s’agit pas seulement de changer les couleurs : le darkmode représente une variante complète du thème visuel d’un site. Certains ajustent également les ombres, les bordures, ou encore les contrastes pour garantir une lecture fluide. Le but n’est pas seulement esthétique : il s’agit d’un véritable confort d’utilisation pour les visiteurs.
Sur le plan technique, la mise en place d’un darkmode peut se faire de différentes manières :
- en utilisant du JavaScript pour détecter ou enregistrer le choix de l’utilisateur ;
- ou plus simplement, en utilisant uniquement le CSS, grâce à des sélecteurs modernes comme
prefers-color-scheme.
Ce tutoriel va justement se concentrer sur cette seconde méthode, plus légère, plus rapide, et surtout plus respectueuse des performances du site.
À quoi sert le Darkmode ?
Le darkmode n’est pas seulement un effet de mode. Il répond à de véritables besoins ergonomiques et visuels. Lorsqu’un utilisateur passe plusieurs heures devant un écran, la luminosité d’un fond blanc peut devenir fatigante, voire inconfortable, surtout en environnement sombre. Le mode sombre, en réduisant l’intensité lumineuse, améliore la lisibilité et le confort oculaire.
Mais le darkmode a aussi une valeur symbolique : il donne une impression de modernité et de soin du détail. En proposant aux utilisateurs le choix entre deux thèmes, clair et sombre, vous leur offrez une expérience personnalisée. C’est un petit plus qui reflète une grande attention à l’expérience utilisateur (UX).
De plus, le mode sombre s’intègre naturellement dans les habitudes modernes. La majorité des systèmes d’exploitation (Windows, macOS, iOS, Android, iOS) permettent désormais à l’utilisateur de définir un thème global, clair ou sombre. Grâce à CSS, votre site peut s’adapter automatiquement à ce choix sans aucune action de leur part. Cela crée une cohérence visuelle entre le système et le site visité.
Enfin, dans une époque où la sobriété numérique prend de l’importance, le darkmode est aussi un argument écologique. En particulier sur les écrans OLED, les pixels noirs consomment moins d’énergie, ce qui permet d’économiser un peu de batterie, notamment sur les appareils mobiles.
Les avantages du Darkmode
Mettre en place un darkmode sur votre site web présente de nombreux avantages, à la fois pour les visiteurs et pour vous en tant que développeur.
1. Amélioration du confort visuel
C’est sans doute l’avantage le plus connu. En réduisant la luminosité et le contraste global, le darkmode rend la lecture plus agréable dans les environnements peu éclairés. Cela diminue la fatigue oculaire et favorise une navigation prolongée, notamment le soir.
2. Adaptation automatique au thème système
Le CSS propose aujourd’hui un outil très puissant : le media query prefers-color-scheme. Grâce à lui, votre site peut détecter si l’utilisateur a choisi un thème clair ou sombre dans les paramètres de son appareil. Vous pouvez alors appliquer automatiquement le style correspondant, sans le moindre script. Cela renforce la sensation d’intégration entre le site et l’environnement de l’utilisateur.
3. Une meilleure accessibilité
Certaines personnes souffrant de troubles visuels (photophobie, dyslexie, etc.) préfèrent naviguer sur des sites sombres. Proposer un mode sombre améliore donc l’accessibilité et l’inclusivité de votre site. Vous rendez votre contenu plus universel.
4. Un style moderne et professionnel
Le darkmode est devenu synonyme de modernité. Il confère une identité forte à un site web, surtout lorsqu’il est bien conçu. Les contrastes, les couleurs d’accentuation et les jeux d’ombres peuvent y être mis en valeur d’une manière plus élégante que sur un fond clair.
5. Un gain de performance
En évitant d’utiliser du JavaScript pour gérer les thèmes, votre page reste légère et rapide. Vous n’avez pas besoin de charger des scripts supplémentaires, de manipuler le DOM ou d’interagir avec le stockage local. Tout se joue directement dans la feuille de style, ce qui réduit le temps de chargement et améliore la performance globale du site.
6. Un petit bonus écologique
Sur les écrans OLED, chaque pixel noir correspond à un pixel éteint. Ainsi, un thème sombre consomme moins d’énergie qu’un thème clair. C’est une économie minime à l’échelle d’un utilisateur, mais significative lorsque l’on considère des millions de visites.
7. Une gestion plus simple du code
Contrairement à ce que l’on pourrait penser, gérer deux thèmes en CSS n’est pas si complexe. Vous pouvez définir une base commune et ne surcharger que les éléments nécessaires pour le darkmode. De cette manière, la maintenance reste facile, et vous évitez les effets de duplication de code souvent rencontrés avec JavaScript.
Le principe du Darkmode en CSS pur
Avant de plonger dans la pratique, il est important de comprendre comment fonctionne le darkmode sans JavaScript. L’idée repose sur un média-query CSS spécifique, nommé prefers-color-scheme. Ce dernier permet de cibler les utilisateurs selon leurs préférences système.
Concrètement, il existe trois valeurs possibles :
prefers-color-scheme: light→ le thème clair est préféré ;prefers-color-scheme: dark→ le thème sombre est préféré ;prefers-color-scheme: no-preference→ aucune préférence n’a été exprimée.
Vous pouvez ainsi écrire deux blocs de style distincts : un pour le mode clair, un autre pour le mode sombre. Le navigateur sélectionnera automatiquement celui qui correspond au thème de l’utilisateur.
Voici un exemple de base pour comprendre ce fonctionnement :
body {
background-color: white;
color: black;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #f5f5f5;
}
}Dans cet exemple, le navigateur appliquera le fond sombre et le texte clair uniquement si le système de l’utilisateur est configuré en mode sombre. Sinon, il affichera la version claire. C’est aussi simple que cela.
Mais bien sûr, ce n’est que le début. Dans la suite du tutoriel, nous allons voir comment aller plus loin : comment structurer vos couleurs, créer un thème cohérent, gérer les images et les icônes, ou encore comment permettre à l’utilisateur de basculer manuellement entre les deux modes sans utiliser JavaScript.
Excellent, Alban.
Voici la deuxième partie du tutoriel complet sur le darkmode en CSS sans JavaScript, qui constitue le cœur pratique de la mise en œuvre.
Elle complète la première partie et poursuivra jusqu’à environ ⅔ du total prévu (soit un texte long et détaillé).
Mettre en place un Darkmode 100 % CSS : méthode complète et expliquée
Avant de plonger dans le code, prenons un moment pour comprendre le principe global d’un darkmode en CSS pur.
Votre objectif est de créer deux jeux de styles : un pour le mode clair, et un autre pour le mode sombre. Ces deux jeux partagent une même base, mais certains éléments diffèrent, notamment les couleurs, les ombres et les images.
Le navigateur choisira automatiquement le bon jeu de styles selon les préférences système de l’utilisateur, grâce à la règle suivante :
@media (prefers-color-scheme: dark) {
/* Styles spécifiques au mode sombre */
}Cette règle agit comme un filtre conditionnel : tout ce qu’elle contient ne s’applique que si l’utilisateur a activé le mode sombre sur son appareil.
Ainsi, il n’est pas nécessaire d’ajouter un bouton, un script ou un stockage local pour basculer entre les deux thèmes. Le changement est instantané et entièrement géré par le navigateur.
Préparer la base : le thème clair par défaut
La plupart des sites web partent d’un thème clair comme base. C’est celui que verront les utilisateurs dont le système n’a pas activé le darkmode.
Commençons donc par définir un style simple :
:root {
--background-color: #ffffff;
--text-color: #1e1e1e;
--accent-color: #0078d7;
--card-background: #f3f3f3;
--border-color: #dddddd;
}
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: system-ui, sans-serif;
margin: 0;
padding: 2rem;
}
a {
color: var(--accent-color);
text-decoration: none;
}
.card {
background-color: var(--card-background);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 1.5rem;
max-width: 500px;
margin: 2rem auto;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}Ici, nous avons défini nos couleurs principales sous forme de variables CSS (préfixées par --).
Cette approche a plusieurs avantages :
- elle facilite la maintenance du code ;
- elle permet de redéfinir les mêmes variables dans le darkmode sans dupliquer toutes les règles ;
- elle rend le code plus lisible et modulaire.
Appliquer le mode sombre avec prefers-color-scheme
Maintenant que la base est prête, nous allons ajouter les styles propres au mode sombre.
@media (prefers-color-scheme: dark) {
:root {
--background-color: #121212;
--text-color: #e6e6e6;
--accent-color: #4e9fff;
--card-background: #1e1e1e;
--border-color: #333333;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
a {
color: var(--accent-color);
}
.card {
background-color: var(--card-background);
border-color: var(--border-color);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
}Et voilà : sans JavaScript, vous venez de créer un darkmode automatique.
Dès que le visiteur bascule son système d’exploitation ou son navigateur en mode sombre, votre site s’adapte instantanément.
Structurer les couleurs pour plus de cohérence
Un darkmode efficace ne se limite pas à inverser le noir et le blanc. Il repose sur un équilibre visuel cohérent.
Pour cela, il est conseillé d’utiliser une palette bien structurée. Voici un exemple d’organisation logique :
- Couleurs de base : fond principal, texte, accent, bordures.
- Couleurs secondaires : fonds de cartes, boutons, survols, surlignages.
- Couleurs d’état : succès, erreur, avertissement.
Ainsi, au lieu de disperser vos couleurs dans le code, centralisez-les dans un bloc :root :
:root {
/* Thème clair */
--color-bg: #ffffff;
--color-fg: #1a1a1a;
--color-accent: #0d6efd;
--color-card: #f9f9f9;
--color-border: #e0e0e0;
--color-success: #4caf50;
--color-error: #e53935;
--color-warning: #ffb300;
}
@media (prefers-color-scheme: dark) {
:root {
/* Thème sombre */
--color-bg: #0f0f0f;
--color-fg: #f1f1f1;
--color-accent: #66b2ff;
--color-card: #1c1c1c;
--color-border: #333333;
--color-success: #81c784;
--color-error: #ef5350;
--color-warning: #ffca28;
}
}Avec cette approche, chaque composant du site s’adapte sans effort.
Si vous changez une couleur, tout le site se mettra automatiquement à jour, aussi bien pour le mode clair que sombre.
Gérer les images et les icônes dans le Darkmode
L’un des points souvent oubliés dans la création d’un darkmode, c’est la gestion des médias.
Un logo noir sur fond blanc peut disparaître complètement sur un fond sombre. Heureusement, le CSS vous permet de gérer cela intelligemment.
Utiliser deux versions d’une même image
La méthode la plus directe consiste à afficher une image différente selon le mode :
<img src="logo-light.png" alt="Logo du site" class="logo">Et dans le CSS :
@media (prefers-color-scheme: dark) {
.logo {
content: url("logo-dark.png");
}
}Cette technique est simple, rapide et parfaitement compatible.
Elle permet, par exemple, de charger une version blanche du logo en mode sombre.
Gérer les images de fond
Si vous utilisez une image en arrière-plan, vous pouvez également la changer selon le thème :
.hero {
background-image: url('bg-light.jpg');
}
@media (prefers-color-scheme: dark) {
.hero {
background-image: url('bg-dark.jpg');
}
}Utiliser les filtres CSS
Dans certains cas, vous pouvez aussi utiliser un filtre CSS pour adapter une image sans en charger deux versions :
@media (prefers-color-scheme: dark) {
img {
filter: brightness(0.8) contrast(1.2);
}
}Cela permet d’assombrir une image claire sans modifier le fichier source.
Ajouter une transition douce entre les modes
Même si le darkmode est automatique, il peut être agréable d’ajouter une transition fluide entre les couleurs.
Cela donne une impression de qualité et d’attention au détail.
* {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}Ainsi, lorsque l’utilisateur change manuellement le thème de son système, la page ne bascule pas brutalement.
Le changement de couleurs devient plus doux et naturel.
Exemple pratique : une page web simple
Pour mettre tout cela en contexte, imaginons une page web simple, composée d’un titre, d’un paragraphe et d’une carte.
Voici le code complet :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de Darkmode en CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Bienvenue sur notre site</h1>
<p>Découvrez comment activer le mode sombre sans JavaScript.</p>
</header>
<main>
<div class="card">
<h2>Un darkmode moderne</h2>
<p>Grâce au CSS moderne, votre site s’adapte automatiquement aux préférences de vos visiteurs.</p>
<a href="#">En savoir plus</a>
</div>
</main>
</body>
</html>Et le fichier style.css correspondant :
:root {
--bg: #ffffff;
--text: #1a1a1a;
--accent: #0066ff;
--card-bg: #f2f2f2;
--border: #dddddd;
}
body {
background-color: var(--bg);
color: var(--text);
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 2rem;
transition: all 0.4s ease;
}
.card {
background-color: var(--card-bg);
border: 1px solid var(--border);
padding: 2rem;
margin: 2rem auto;
border-radius: 10px;
max-width: 500px;
}
a {
color: var(--accent);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #121212;
--text: #e0e0e0;
--accent: #4e9fff;
--card-bg: #1e1e1e;
--border: #333333;
}
}En ouvrant cette page dans un navigateur moderne, vous verrez le site s’adapter automatiquement selon votre thème système.
Aucune ligne de JavaScript, aucune interaction manuelle : le darkmode fonctionne tout seul.
Parfait. Voici la suite complète du tutoriel, avec un nouveau chapitre entièrement dédié au choix des couleurs sombres. Ce passage s’intègre naturellement dans la continuité de la première partie que je vous ai déjà rédigée. Le ton, le style et la cohérence SEO autour du mot-clé « darkmode » sont maintenus.
Bien choisir ses couleurs sombres pour un darkmode réussi
Mettre en place un darkmode efficace ne consiste pas simplement à inverser les couleurs de votre site. Le choix des teintes sombres est une étape essentielle, à la fois pour garantir le confort visuel des utilisateurs et pour maintenir l’identité graphique de votre projet. Dans ce chapitre, vous allez apprendre à sélectionner des couleurs harmonieuses, lisibles et agréables à l’œil, tout en conservant un bon contraste.
Comprendre la psychologie des couleurs sombres
Les couleurs sombres ont un impact psychologique fort. Elles évoquent souvent la modernité, la sobriété et la concentration. Le noir, par exemple, renvoie à l’élégance et au sérieux, tandis que les gris foncés apportent une sensation de calme et de stabilité. Le bleu nuit, quant à lui, est souvent associé à la confiance et à la technologie.
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?Dans un darkmode, ces nuances sont précieuses, car elles influencent directement la perception que les visiteurs auront de votre site. Un fond trop noir peut donner une impression d’austérité, voire fatiguer les yeux si les contrastes sont trop marqués. À l’inverse, un gris foncé légèrement teinté peut offrir un rendu plus doux et plus agréable.
Ne pas se contenter du noir pur
L’erreur la plus fréquente dans la mise en place d’un darkmode est d’utiliser un noir pur (#000000) comme couleur d’arrière-plan. Si ce choix peut sembler logique, il est rarement le plus confortable. Un fond totalement noir crée un contraste trop élevé avec les textes blancs, ce qui peut provoquer une fatigue visuelle, surtout lors de longues lectures.
Préférez plutôt un gris très foncé comme #121212, #1a1a1a ou #222222. Ces teintes conservent le côté sombre recherché tout en adoucissant la luminosité. Vous pouvez également jouer sur de légères nuances colorées, par exemple un gris bleuté (#1c1f26) ou un gris brun (#2a2523), pour renforcer la personnalité visuelle de votre interface.
Trouver le bon contraste
Le contraste est un élément clé du darkmode. Il garantit la lisibilité du texte, la compréhension des icônes et la hiérarchisation des informations. Pour qu’un texte soit lisible sur un fond sombre, il faut que la différence de luminosité entre le texte et l’arrière-plan soit suffisamment importante.
La norme du WCAG (Web Content Accessibility Guidelines) recommande un ratio de contraste minimum de 4.5:1pour le texte normal et de 3:1 pour le texte en grand format. Des outils gratuits comme Contrast Checker (disponible sur le site WebAIM) ou Colorable permettent de vérifier facilement ces ratios entre deux couleurs.
Un bon darkmode ne repose pas uniquement sur du texte blanc sur fond noir. Il utilise différentes intensités de gris pour distinguer les zones principales, les encadrés, les boutons et les éléments interactifs. Par exemple :
- Arrière-plan général :
#121212 - Zone de contenu :
#1e1e1e - Bordures ou séparateurs :
#2a2a2a - Texte principal :
#f5f5f5 - Texte secondaire :
#bbbbbb
Utiliser des couleurs d’accentuation avec modération
Même dans un darkmode, les couleurs vives ont leur place, mais elles doivent être utilisées avec précaution. Elles permettent d’attirer l’attention sur certains éléments, comme les boutons, les liens ou les notifications.
Le secret est de choisir une couleur d’accent qui s’harmonise bien avec vos tons sombres. Les teintes froides comme le bleu, le violet ou le turquoise fonctionnent souvent très bien dans les interfaces nocturnes, car elles conservent un effet technologique et moderne. Les tons chauds, en revanche, doivent être dosés plus légèrement, sous peine de créer un contraste trop agressif.
Par exemple :
- Bleu d’accent :
#2979ffou#1e88e5 - Violet d’accent :
#7e57c2 - Vert d’accent :
#43a047 - Rouge d’accent (erreur ou alerte) :
#e53935
Un bouton de validation vert sur fond sombre ressort très bien, tandis qu’un bouton rouge attire immédiatement l’attention sur une action critique.
Respecter la hiérarchie visuelle
Dans une interface claire, les ombres et les reliefs se perçoivent facilement. En darkmode, ce n’est pas le cas : les contrastes étant plus faibles, il faut jouer sur d’autres effets visuels pour marquer la hiérarchie entre les éléments.
Vous pouvez, par exemple :
- Utiliser une légère bordure claire (
rgba(255,255,255,0.1)) pour délimiter un bloc. - Appliquer un effet de surbrillance ou un halo lumineux sur les boutons actifs.
- Créer des dégradés discrets pour éviter les aplats monotones.
Un bon darkmode ne doit jamais paraître plat. Chaque élément doit conserver une lisibilité et une profondeur suffisante.
Tenir compte des écrans et des environnements
Tous les écrans ne rendent pas les couleurs sombres de la même manière. Sur les écrans OLED, le noir est parfait car les pixels s’éteignent complètement, ce qui économise de l’énergie. Sur d’autres types d’écrans (LCD, IPS), un noir trop profond peut paraître légèrement gris ou manquer d’uniformité.
Il est donc conseillé de tester votre palette sur plusieurs supports : ordinateur, tablette, smartphone, et si possible dans différents environnements lumineux. Ce travail permet de s’assurer que votre darkmode reste agréable à utiliser, de jour comme de nuit.
Harmoniser le darkmode avec le mode clair
Enfin, n’oubliez pas que le darkmode n’est pas un univers à part, mais une variation du thème principal de votre site. Les couleurs sombres doivent rester cohérentes avec celles du mode clair, afin que le visiteur retrouve facilement ses repères lorsqu’il passe de l’un à l’autre.
Par exemple, si votre charte graphique repose sur un bleu clair et un vert pastel, vous pouvez les décliner en versions plus profondes : un bleu nuit pour remplacer le bleu clair, et un vert sapin pour remplacer le vert pastel. Cette cohérence renforce la continuité visuelle et renvoie une image professionnelle.
Exemple pratique : création d’une palette équilibrée
Prenons un exemple concret d’une interface simple en darkmode.
Imaginons que vous conceviez un tableau de bord pour un site de statistiques.
- Arrière-plan global :
#121212 - En-tête :
#181818 - Cartes de contenu :
#1e1e1e - Texte principal :
#f0f0f0 - Texte secondaire :
#a0a0a0 - Boutons primaires :
#2979ff - Boutons secondaires :
#424242 - Bordures :
#2c2c2c
Cette combinaison offre une excellente lisibilité tout en conservant un style sobre et moderne. Les couleurs neutres assurent le confort visuel, tandis que le bleu d’accent apporte une touche d’énergie et de dynamisme.
Parfait, Alban.
Voici la troisième et dernière partie du tutoriel complet sur le darkmode en CSS sans JavaScript.
Cette section clôt le guide avec la personnalisation manuelle du thème, la vérification de compatibilité, les optimisations SEO et accessibilité, puis une conclusion solide qui donne du sens à l’ensemble.
Aller plus loin avec le Darkmode CSS : personnalisation et bonnes pratiques
Jusqu’ici, le darkmode s’adaptait automatiquement aux préférences du système.
Mais que faire si vous souhaitez laisser à vos visiteurs le choix direct entre le mode clair et le mode sombre, sans jamais écrire une ligne de JavaScript ?
C’est possible grâce à une astuce ingénieuse utilisant uniquement le CSS et le HTML.
Utiliser une case à cocher comme interrupteur
L’idée est simple : on insère une case à cocher dans le HTML, puis on utilise le sélecteur :checked pour modifier le thème.
Voici l’exemple concret :
<input type="checkbox" id="theme-toggle">
<label for="theme-toggle">🌙 Mode sombre</label>
<div class="content">
<h1>Darkmode CSS sans JS</h1>
<p>Basculer entre clair et sombre sans une ligne de script !</p>
</div>Puis, dans le CSS :
:root {
--bg: #ffffff;
--text: #1a1a1a;
}
body {
background-color: var(--bg);
color: var(--text);
transition: background-color 0.3s ease, color 0.3s ease;
}
#theme-toggle {
position: absolute;
left: -9999px; /* on cache la case */
}
label {
cursor: pointer;
background-color: #f2f2f2;
color: #333;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
display: inline-block;
margin-bottom: 1rem;
}
#theme-toggle:checked ~ .content {
--bg: #121212;
--text: #f5f5f5;
}Ici, l’astuce repose sur le sélecteur général de frères (~) : quand la case est cochée, la section .content adopte un autre jeu de variables CSS. L’effet est immédiat, fluide et purement CSS.
Certes, cette méthode ne conserve pas le choix à la prochaine visite (ce serait le rôle du JavaScript), mais elle démontre que l’on peut créer un switch fonctionnel sans quitter la feuille de style.
Tester la compatibilité et le rendu du Darkmode
Avant de déployer votre site, il est essentiel de vérifier le comportement du darkmode sur différents navigateurs et systèmes.
Navigateurs compatibles
Bonne nouvelle : la règle prefers-color-scheme est largement prise en charge.
Elle fonctionne sur :
- Chrome (à partir de la version 76)
- Firefox (à partir de la version 67)
- Safari (depuis macOS Mojave)
- Edge (Chromium)
- Opera (récemment ajouté)
Vous pouvez consulter le site caniuse.com pour confirmer les compatibilités à jour.
Comment tester le darkmode dans votre navigateur
Pour tester sans changer le thème global de votre système, la plupart des navigateurs offrent une option spécifique dans leurs outils de développement :
- Chrome / Edge : Ouvrez l’inspecteur → onglet Rendering → Emulate CSS prefers-color-scheme.
- Firefox : Ouvrez l’inspecteur → menu “Outils pour les développeurs” → Paramètres de simulation de couleur.
- Safari : Activez Développement > Simuler un mode sombre.
Vous pouvez ainsi vérifier rapidement que votre site s’adapte bien aux deux thèmes.
Accessibilité et lisibilité : les points à surveiller
Créer un darkmode ne consiste pas seulement à inverser les couleurs.
Il faut veiller à maintenir une lisibilité optimale pour tous les utilisateurs, quelle que soit leur vision ou leur appareil.
Le contraste des couleurs
Le contraste entre le texte et le fond doit rester suffisamment élevé pour assurer le confort visuel.
Le standard WCAG (Web Content Accessibility Guidelines) recommande un contraste minimum de 4,5:1 pour le texte normal et 3:1 pour le texte large.
Vous pouvez tester vos combinaisons avec des outils comme :
Choisissez des tons légèrement gris pour éviter les contrastes trop durs : un texte gris clair sur fond noir est souvent plus agréable qu’un blanc pur (#fff) sur noir absolu (#000).
Les couleurs d’accent
Veillez à adapter vos couleurs d’accentuation pour le darkmode.
Une teinte vive peut être agréable sur fond clair, mais trop agressive sur fond sombre.
L’utilisation de variables CSS vous permet d’ajuster ces teintes précisément, comme nous l’avons vu précédemment.
Les éléments interactifs
Assurez-vous que les liens, boutons et éléments actifs restent visibles et intuitifs.
Vous pouvez jouer sur les ombres (box-shadow) ou les bordures pour faire ressortir les boutons dans les deux modes sans rompre l’harmonie générale.
Optimiser le Darkmode pour le SEO
Le darkmode n’a pas d’impact direct sur le référencement naturel, mais il influence plusieurs aspects indirectement.
L’expérience utilisateur (UX)
Google valorise les sites qui offrent une expérience fluide et agréable.
Un darkmode bien conçu, lisible et accessible peut améliorer le taux de rétention (dwell time), c’est-à-dire le temps passé sur votre site, ce qui est un signal positif pour le SEO.
Le temps de chargement
En supprimant le JavaScript et en reposant uniquement sur le CSS, votre site charge plus vite.
Or, la vitesse d’affichage est un critère SEO déterminant, surtout sur mobile.
Un darkmode CSS pur contribue donc indirectement à un meilleur classement.
Les métadonnées et le thème du navigateur
Vous pouvez également définir une couleur de thème adaptée pour le navigateur via la balise meta suivante :
<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">Cette balise ajuste la couleur de la barre d’adresse sur mobile, renforçant l’intégration du darkmode avec l’appareil de l’utilisateur.
Un petit détail, mais qui améliore la cohérence visuelle et la perception de qualité.
Un cas pratique complet : la page de profil utilisateur
Pour illustrer l’ensemble des notions abordées, imaginons une petite page de profil utilisateur avec un darkmode automatique.
Voici un exemple fonctionnel :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
<title>Profil utilisateur – Darkmode CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="profile">
<img src="avatar.png" alt="Photo de profil">
<h1>Bonjour, Lucie</h1>
<p>Bienvenue sur votre espace personnel.</p>
<button>Modifier le profil</button>
</div>
</body>
</html>Et le CSS associé :
:root {
--bg: #f9f9f9;
--fg: #1a1a1a;
--accent: #0066ff;
--card-bg: #ffffff;
--border: #e0e0e0;
}
body {
background-color: var(--bg);
color: var(--fg);
font-family: 'Inter', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.profile {
background-color: var(--card-bg);
border: 1px solid var(--border);
padding: 2rem;
border-radius: 15px;
text-align: center;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
width: 300px;
transition: all 0.3s ease;
}
button {
background-color: var(--accent);
color: white;
border: none;
padding: 0.7rem 1.5rem;
border-radius: 8px;
cursor: pointer;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #121212;
--fg: #e6e6e6;
--accent: #4e9fff;
--card-bg: #1e1e1e;
--border: #333333;
}
}Résultat : une page élégante, moderne, et parfaitement responsive au thème de l’utilisateur.
Le tout sans script, sans plugin, et sans dépendance externe.
Les erreurs à éviter
Même si le darkmode CSS semble simple, certains pièges sont fréquents :
- Oublier les images : les logos ou icônes noires deviennent invisibles sur fond sombre.
Utilisez des versions adaptées ou des filtres CSS. - Inverser brutalement les couleurs : un contraste trop fort fatigue les yeux.
Préférez des gris foncés (#121212, #1e1e1e) plutôt qu’un noir absolu. - Négliger les bordures et ombres : le mode sombre demande souvent plus de subtilité dans les effets visuels pour conserver la hiérarchie des éléments.
- Multiplier les variables : gardez une palette réduite pour éviter les incohérences visuelles.
En respectant ces règles, votre darkmode sera aussi esthétique qu’ergonomique.
Le Darkmode, un détail qui change tout
Mettre en place un darkmode uniquement avec du CSS, c’est bien plus qu’un exercice de style. C’est une manière de rendre votre site plus moderne, plus accessible et plus respectueux de vos visiteurs.
Sans une seule ligne de JavaScript, vous exploitez les capacités natives du navigateur, tout en améliorant les performances, le confort visuel et la cohérence avec le système de l’utilisateur.
Le darkmode illustre parfaitement la philosophie du web moderne : simplicité, performance et personnalisation. Ce n’est pas une simple option esthétique, mais une réelle amélioration de l’expérience utilisateur.
En proposant un mode sombre, vous offrez un site qui s’adapte à chacun, à chaque moment, et à chaque environnement.
Dans un monde où la lumière bleue et la fatigue visuelle sont des enjeux quotidiens, offrir cette alternative est un geste aussi bien technique qu’humain.
Et le plus beau, c’est que vous pouvez le faire avec quelques lignes de CSS bien pensées, sans script, sans surcouche, sans complexité inutile.
Prenez le temps d’expérimenter, de tester vos contrastes, de créer vos palettes.
Un darkmode bien conçu n’est pas qu’un ajout visuel : c’est un signe de maturité dans la conception web, un soin du détail qui se remarque immédiatement.
