Light-dark() CSS : simplifiez enfin le mode clair et sombre

Bien souvent, lorsque l’on débute avec le développement web, on a l’impression que tout est compliqué dès qu’il s’agit de design “intelligent”. Le mode sombre et le mode clair en sont l’exemple parfait. Pendant des années, il fallait multiplier les media queries, dupliquer des variables, ajouter des conditions partout… bref, ce n’était pas forcément amusant. Aujourd’hui, la fonction light-dark() css change complètement la donne et simplifie incroyablement la gestion des thèmes.

• Comprendre simplement comment utiliser light-dark() pour obtenir automatiquement un site lisible et agréable en mode clair comme en mode sombre.
• Savoir structurer ses couleurs et ses styles pour gagner du temps, éviter les répétitions de code et rendre son CSS plus propre et plus facile à maintenir.
• Découvrir comment profiter de cette fonctionnalité moderne tout en restant compatible avec les navigateurs actuels et en respectant la lisibilité et l’accessibilité des utilisateurs.

Avant même de parler de technique, il faut bien comprendre ce que cette fonctionnalité apporte : elle permet d’afficher automatiquement une couleur adaptée au mode clair ou au mode sombre, sans écrire du code compliqué. Et surtout, elle respecte directement les préférences du navigateur ou du système de l’utilisateur. C’est donc un vrai confort autant pour le développeur que pour l’internaute. Vous allez voir, même si vous débutez, vous serez capable d’utiliser facilement la fonction light-dark() en CSS.

Pour être honnête, la première fois que l’on découvre cette nouveauté CSS, on a presque envie de dire “Mais pourquoi cela n’existait pas avant ?”. C’est un peu comme découvrir que votre voiture a le régulateur de vitesse après avoir fait dix ans de longs trajets sans. On vit très bien sans, mais quand on l’a, on n’a plus envie de revenir en arrière.

Comprendre simplement ce qu’est la fonction light-dark() en CSS

La fonction light-dark() est une fonction CSS introduite dans les spécifications modernes de CSS Color (W3C). Son rôle est très simple : elle permet de définir deux couleurs, une pour le mode clair et une pour le mode sombre. Le navigateur choisit ensuite automatiquement la bonne valeur selon le contexte d’affichage.

Concrètement, la fonction light-dark() fonctionne un peu comme une “phrase” que CSS comprend parfaitement :

• Si le site est affiché en mode clair, alors utilise cette couleur.
• Si le site est affiché en mode sombre, utilise l’autre couleur.

Vous n’avez rien d’autre à faire, pas besoin d’écrire une seconde règle, pas besoin de media query supplémentaire. C’est précisément là que cette fonction devient magique.

La structure de base est extrêmement simple. Elle se présente toujours sous cette forme :

color: light-dark(couleurPourLeClair, couleurPourLeSombre);

Vous définissez la couleur du mode clair en premier, puis celle du mode sombre en second. Cela suffit déjà pour commencer à profiter pleinement de light-dark() css.

Exemple concret pour bien comprendre le fonctionnement

Prenons un exemple très simple. Imaginez que vous souhaitiez afficher du texte noir en mode clair et blanc en mode sombre. Sans light-dark(), vous devriez écrire deux règles CSS différentes, gérer prefers-color-scheme, et jongler avec du code supplémentaire. Avec light-dark(), tout tient en une seule ligne.

p {
  color: light-dark(#000000, #ffffff);
}

Si l’utilisateur est en mode clair, le texte sera noir. S’il est en mode sombre, il deviendra automatiquement blanc. Vous n’avez pas besoin d’ajouter la moindre condition. C’est fluide, propre et complètement naturel.

On peut évidemment faire la même chose pour un arrière-plan. Par exemple :

body {
  background-color: light-dark(#ffffff, #0f0f0f);
}

En clair, votre site devient immédiatement capable de s’adapter, sans effort. Et surtout, cela reste compréhensible pour un débutant, car la logique reste lisible à l’œil humain : clair → sombre, rien de plus.

Comment fonctionne réellement la détection clair / sombre ?

Même si l’on reste dans une approche simple, il est important de comprendre ce qu’il y a derrière cette magie apparente. La fonction light-dark() CSS ne fait pas “au hasard”. Elle repose sur deux éléments principaux.

D’abord, elle se base sur les préférences d’affichage de l’utilisateur. Si son système est configuré en mode sombre, le navigateur active automatiquement ce contexte sombre. Si son système est en mode clair, alors c’est le mode clair qui s’applique. Autrement dit, vous respectez automatiquement le confort visuel de vos visiteurs, sans ajouter du JavaScript ou des réglages compliqués.

Ensuite, light-dark() peut aussi prendre en compte la propriété CSS color-scheme. Cette propriété indique au navigateur que votre site est pensé pour gérer le clair, le sombre, ou les deux. Par exemple :

:root {
  color-scheme: light dark;
}

Cela signifie que votre site accepte les deux modes. Dans ce contexte, la fonction light-dark() saura parfaitement lequel choisir. Si vous n’indiquez rien, le navigateur peut malgré tout se débrouiller, mais annoncer clairement vos intentions est toujours une bonne pratique.

Pourquoi utiliser light-dark() plutôt que prefers-color-scheme seul ?

Pendant longtemps, la seule solution pour gérer le mode sombre était d’utiliser les media queries basées sur prefers-color-scheme. Cela fonctionne toujours, c’est même très utilisé, mais cela devient vite lourd à maintenir, surtout lorsque vous avez beaucoup d’éléments, de composants, ou des thèmes un peu complexes.

Avec light-dark(), vous pouvez directement écrire la logique de couleur là où elle est utilisée. Cela rend votre code plus court, plus clair, plus lisible. Si vous devez retoucher une couleur, vous la modifiez à un seul endroit, au lieu de parcourir plusieurs blocs de CSS séparés.

Voici une comparaison pour bien comprendre.

Ancienne manière avec prefers-color-scheme :

button {
  background: #ffffff;
  color: #000000;
}

@media (prefers-color-scheme: dark) {
  button {
    background: #222222;
    color: #ffffff;
  }
}

Nouvelle manière avec light-dark() css :

button {
  background: light-dark(#ffffff, #222222);
  color: light-dark(#000000, #ffffff);
}

Moins de répétition, moins de code, et surtout une écriture beaucoup plus naturelle.

Aller plus loin : utiliser light-dark() avec des variables CSS

Jusqu’ici, nous avons utilisé light-dark() directement dans les propriétés. C’est très bien pour débuter, mais dans un vrai projet, vous n’allez pas gérer vos couleurs à la main partout. La bonne pratique moderne consiste à utiliser des variables CSS, aussi appelées custom properties. Bonne nouvelle, la fonction light-dark() fonctionne parfaitement avec elles.

Imaginons que vous définissiez vos couleurs dans :root. Vous pouvez directement intégrer le thème clair et sombre dans une seule variable.

:root {
  --couleur-texte: light-dark(#111111, #f5f5f5);
  --fond-principal: light-dark(#ffffff, #121212);
}

Ensuite, vous pouvez les utiliser partout :

body {
  background: var(--fond-principal);
  color: var(--couleur-texte);
}

En faisant cela, vous rendez votre code encore plus propre et encore plus simple à maintenir. Si un jour vous souhaitez modifier une couleur, il vous suffira de la changer à un seul endroit. Et surtout, vous ne perdez jamais le bénéfice de la simplicité offerte par light-dark().

Ce fonctionnement donne aussi l’impression agréable de “parler” avec le navigateur. Vous lui dites littéralement : cette variable doit être claire dans un cas, sombre dans l’autre, débrouille-toi. Et il se débrouille très bien.

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 ?

Construire une petite interface complète avec light-dark() css

Passons à une mise en situation un peu plus concrète. Imaginons une petite carte d’information, comme celles que l’on peut trouver sur le Créa-Blog. Vous souhaitez que son fond, son texte et éventuellement une bordure changent automatiquement selon le mode clair ou sombre.

Voici un exemple simple mais très parlant.

:root {
  color-scheme: light dark;
  --fond-carte: light-dark(#ffffff, #1c1c1c);
  --texte-carte: light-dark(#222222, #eeeeee);
  --bordure-carte: light-dark(#dddddd, #333333);
}

.card {
  background: var(--fond-carte);
  color: var(--texte-carte);
  border: 1px solid var(--bordure-carte);
  padding: 20px;
  border-radius: 8px;
}

Et côté HTML, rien de plus simple :

<div class="card">
  <h2>Titre de la carte</h2>
  <p>Voici un texte qui sera lisible dans tous les modes.</p>
</div>

Sans ajouter une seule ligne de media query ou de JavaScript, votre carte s’adapte toute seule. C’est exactement pour ce genre de cas que la fonction light-dark() CSS est si intéressante. Elle fait disparaître une bonne partie de la complexité technique et vous permet de vous concentrer sur ce qui compte vraiment : l’expérience utilisateur.

Parlons accessibilité : contrastes et lisibilité

Créer un mode sombre n’est pas juste une question de “faire joli”. C’est aussi une question de confort visuel et parfois même de santé visuelle. Une interface mal pensée peut fatiguer les yeux, rendre la lecture difficile, voire totalement impossible pour certaines personnes. La fonction light-dark() n’est pas une baguette magique qui corrige tout, mais elle vous oblige à réfléchir aux bonnes couleurs dès le départ, ce qui est une excellente chose.

Quand vous choisissez vos couleurs, essayez toujours de garder une bonne différence entre la couleur du texte et celle du fond. Même si votre site est moderne et élégant, il doit surtout rester lisible. Par exemple, du gris clair sur fond blanc en mode clair sera compliqué à lire. De la même manière, du gris un peu trop sombre sur noir en mode sombre sera vite inconfortable.

Un bon réflexe consiste à tester vos couples de couleurs dans les deux modes. C’est un petit effort, mais il fait une énorme différence pour vos visiteurs. Et, honnêtement, cela fait aussi plaisir d’avoir un site qui semble professionnel, cohérent et agréable à utiliser.

Beaucoup de développeurs (moi compris) ont déjà fait l’erreur de créer un magnifique mode sombre… puis de se rendre compte trop tard que certains textes devenaient presque invisibles.C’est un bon rappel pour se souvenir que l’accessibilité n’est pas une option.

Compatibilité navigateur : peut-on utiliser light-dark() en production ?

Venons-en à une question que tous les développeurs se posent : est-ce que je peux réellement utiliser la fonction light-dark() css sur un vrai site, sans risquer de tout casser ? Comme souvent avec les nouveautés, la compatibilité est progressive, mais elle est aujourd’hui suffisamment bonne pour envisager son utilisation sérieuse.

Les navigateurs modernes basés sur des moteurs récents prennent déjà en charge cette fonctionnalité, notamment dans leurs versions actuelles et à jour. En revanche, certains navigateurs plus anciens ou certaines versions non mises à jour risquent de ne pas comprendre la fonction.

Heureusement, CSS a une philosophie très intelligente : lorsqu’une propriété n’est pas comprise, elle est simplement ignorée. Cela signifie que vous pouvez facilement prévoir une valeur de repli, puis utiliser light-dark() juste après. Exemple :

body {
  background: #ffffff;
  background: light-dark(#ffffff, #121212);
}

Si le navigateur ne comprend pas light-dark(), il utilisera le premier background. S’il la comprend, il prendra la seconde valeur. Vous offrez ainsi une compatibilité maximale, sans ajouter de hacks compliqués ni de scripts inutiles.

Peut-on combiner light-dark() avec un bouton pour changer de thème ?

La question arrive très souvent. Beaucoup de sites proposent un bouton permettant de basculer manuellement entre clair et sombre, indépendamment du système. La fonction light-dark() CSS repose principalement sur les préférences utilisateur et le contexte global, mais vous pouvez tout à fait envisager une combinaison.

Aujourd’hui, la méthode la plus utilisée consiste encore à basculer une classe sur le HTML ou le body, puis à adapter les couleurs via des variables. Vous pouvez alors jouer avec light-dark() comme valeur par défaut, tout en permettant à l’utilisateur de forcer un thème. Cela demande un peu plus de logique, et parfois un peu de JavaScript, mais bonne nouvelle : cela reste parfaitement compatible avec tout ce que nous avons vu jusqu’ici.

Voici un exemple complet, simple et prêt à l’emploi, pour combiner :

• le comportement automatique via light-dark()
• un bouton qui permet à l’utilisateur de forcer “clair” ou “sombre”
• la mémorisation du choix en localStorage.

La structure HTML

<!-- Bouton dans votre header par exemple -->
<button
  id="theme-toggle"
  type="button"
  aria-pressed="false"
>
  Basculer thème
</button>

La mise en page CSS

/* 1. Comportement par défaut : on laisse le système décider.
   light-dark() gère automatiquement clair / sombre.
*/
:root {
  color-scheme: light dark;

  --fond-page: light-dark(#ffffff, #121212);
  --texte-page: light-dark(#111111, #f5f5f5);
}

body {
  background: var(--fond-page);
  color: var(--texte-page);
}

/* 2. Si l’utilisateur force un thème, on passe AU-DESSUS
   des light-dark() avec des valeurs “fixes”.
   Ces valeurs prennent le dessus quand data-theme est présent.
*/
:root[data-theme="light"] {
  color-scheme: light; /* on signale qu’on force le mode clair */
  --fond-page: #ffffff;
  --texte-page: #111111;
}

:root[data-theme="dark"] {
  color-scheme: dark; /* on signale qu’on force le mode sombre */
  --fond-page: #121212;
  --texte-page: #f5f5f5;
}

Le code JavaScript

Et voici le JavaScript pour faire fonctionner le bouton et mémoriser le choix :

// Sélecteur du bouton
const themeToggleBtn = document.getElementById('theme-toggle');
const root = document.documentElement;
const STORAGE_KEY = 'theme-preference';

// 1. Récupérer le thème enregistré, s'il existe
function getStoredTheme() {
  try {
    return localStorage.getItem(STORAGE_KEY);
  } catch (e) {
    return null;
  }
}

// 2. Enregistrer le thème choisi par l'utilisateur
function storeTheme(theme) {
  try {
    localStorage.setItem(STORAGE_KEY, theme);
  } catch (e) {
    // Si localStorage est bloqué, on ne fait rien, ce n'est pas grave
  }
}

// 3. Appliquer visuellement un thème forcé ("light" | "dark" | null)
function applyTheme(theme) {
  if (theme === 'light') {
    root.setAttribute('data-theme', 'light');
    themeToggleBtn.setAttribute('aria-pressed', 'true');
    themeToggleBtn.textContent = 'Passer en mode sombre';
  } else if (theme === 'dark') {
    root.setAttribute('data-theme', 'dark');
    themeToggleBtn.setAttribute('aria-pressed', 'true');
    themeToggleBtn.textContent = 'Passer en mode clair';
  } else {
    // Pas de thème forcé : on enlève l’attribut → light-dark() reprend la main
    root.removeAttribute('data-theme');
    themeToggleBtn.setAttribute('aria-pressed', 'false');
    themeToggleBtn.textContent = 'Basculer thème';
  }
}

// 4. Initialisation au chargement de la page
(function initTheme() {
  const stored = getStoredTheme();
  if (stored === 'light' || stored === 'dark') {
    applyTheme(stored);
  } else {
    // Aucun choix stocké : on laisse light-dark() gérer automatiquement
    applyTheme(null);
  }
})();

// 5. Gestion du clic sur le bouton
themeToggleBtn.addEventListener('click', () => {
  const current = root.getAttribute('data-theme');

  let nextTheme;
  if (current === 'light') {
    nextTheme = 'dark';         // Si on est forcé en clair → on force sombre
  } else if (current === 'dark') {
    nextTheme = null;           // Si on est forcé en sombre → retour au mode auto (light-dark)
  } else {
    nextTheme = 'light';        // Si aucun thème forcé → on force clair
  }

  applyTheme(nextTheme);

  if (nextTheme) {
    storeTheme(nextTheme);
  } else {
    // Si on repasse en mode automatique, on supprime la préférence
    try {
      localStorage.removeItem(STORAGE_KEY);
    } catch (e) {}
  }
});

• Par défaut, aucun data-theme → les couleurs sont gérées automatiquement par light-dark() en fonction du système.
• Si l’utilisateur clique, on force d’abord le mode clair, puis le mode sombre, puis on revient au mode “auto” après un troisième clic.
• Le choix “clair” ou “sombre” est mémorisé en localStorage, donc conservé entre les visites.

Vous pouvez bien sûr adapter les textes du bouton, les couleurs, ou simplifier le cycle (par exemple, ne proposer que clair ↔ sombre sans mode auto) en modifiant un peu la logique dans le handler du clic.

La philosophie à garder en tête est simple : light-dark() vous simplifie la vie pour la gestion automatique des modes. Si vous voulez aller plus loin avec une personnalisation totale, vous avez toujours la liberté de compléter avec d’autres techniques.

Quand éviter d’utiliser light-dark() ?

Même si cela peut donner l’impression que la fonction light-dark() est la réponse à tout, ce n’est pas toujours nécessaire. Par exemple, si votre site possède un design extrêmement personnalisé avec des thèmes multiples, des palettes très variées ou des logiques complexes, vous aurez peut-être intérêt à structurer vos thèmes autrement.

La fonction light-dar() en CSS est idéale pour :

• les sites qui veulent un mode clair et sombre simple mais propre
• les projets pédagogiques
• les blogs, portfolios, sites vitrines
• les interfaces modernes qui doivent rester légères

Elle devient moins pertinente si votre logique dépasse largement le simple duo clair / sombre. Dans ce cas, vous pouvez toujours l’utiliser ponctuellement, mais elle ne sera pas la seule solution.

Pourquoi adopter la fonction light-dark() dès maintenant ?

Si vous débutez en développement web, vous avez peut-être parfois l’impression que tout est compliqué, que chaque fonctionnalité demande trois fichiers, deux scripts et une bonne dose de patience. Avec la fonction light-dark() css, c’est exactement l’inverse. Vous gagnez en simplicité, en clarté et en efficacité tout en offrant une expérience moderne et confortable à vos visiteurs.

Adopter light-dark(), c’est aussi accepter une nouvelle génération de CSS, plus intelligente, plus expressive et plus agréable à utiliser. Vous n’avez plus à lutter contre le navigateur, vous travaillez avec lui. C’est un changement subtil, mais qui fait énormément de bien lorsqu’on construit des interfaces.

Enfin, c’est une formidable occasion d’apprendre en douceur. En maîtrisant light-dark(), vous posez des bases solides qui vous serviront ensuite pour des thèmes plus élaborés, des systèmes de design plus complets et des interfaces toujours plus soignées. Si vous continuez à explorer, à tester et à expérimenter, vous verrez très vite à quel point cette fonction peut devenir un réflexe naturel.

Si vous souhaitez aller encore plus loin, travailler sur des thèmes complets, ou intégrer cette logique dans vos projets créatifs, vous avez maintenant une base solide. Et surtout, vous avez découvert que même une fonctionnalité technique peut rester simple et agréable à apprendre.

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr