Dégradés en mode sombre : garder la profondeur sans éblouir

Les dégradés en mode sombre rendent le mieux quand vous leur donnez leurs propres couleurs plutôt que de reprendre celles du thème clair. Sur un fond sombre, l’œil s’adapte et chaque couleur saturée paraît plus lumineuse : un dégradé qui semblait calme sur blanc se met à éblouir. Baissez la chroma, réservez la couleur vive à de petites zones, teintez le fond au lieu d’utiliser le noir pur, et basculez les valeurs avec prefers-color-scheme ou light-dark(). La profondeur reste, l’éblouissement disparaît.

Pourquoi les dégradés du thème clair échouent dans le noir

Trois choses changent quand la page passe au sombre. Les grandes zones lumineuses deviennent ce qu’il y a de plus clair dans la pièce, ce qui se lit comme un éblouissement plutôt que comme une couleur. Les ombres cessent de fonctionner, donc les dégradés qui comptaient sur des bords assombris pour créer de la profondeur la perdent. Et les écarts entre tons sombres deviennent plus visibles, si bien que les dégradés subtils commencent à former des bandes. Le design du mode sombre couvre le thème dans son ensemble ; cette page parle des dégradés.

Cinq règles pour les dégradés en mode sombre

1. 1

   Teintez le fond

   Utilisez un quasi noir qui tire vers votre teinte, comme #0b0a14 pour une marque violette, au lieu de #000000. Le noir pur donne l’impression que la couleur est collée dessus.

2. 2

   Baissez la chroma

   Réduisez la saturation d’environ un tiers pour les grandes zones. En OKLCH, gardez la teinte et diminuez la valeur C.

3. 3

   Réduisez la partie lumineuse

   Laissez la couleur vive occuper un coin ou une lueur, et gardez l’essentiel de la surface proche du fond.

4. 4

   Éclaircissez, n’ombrez pas

   Montrez l’élévation avec des surfaces un peu plus claires et des dégradés qui s’éclaircissent vers le haut, car les ombres disparaissent sur fond sombre.

5. 5

   Ajoutez du grain

   Un bruit fin casse les paliers visibles des fondus sombres. Les dégradés granuleux donne la recette.

Changer de dégradé avec prefers-color-scheme

Stockez les couleurs des dégradés, pas les dégradés entiers, dans des propriétés personnalisées. Le thème sombre n’a alors qu’à redéfinir les couleurs, et chaque composant qui les utilise se met à jour. C’est le même modèle que celui décrit dans les variables CSS pour les thèmes.

:root {
  color-scheme: light dark;
  --ground: #faf8ff;
  --glow: #c4b5fd;
  --glow-2: #f9a8d4;
  --hero: radial-gradient(circle at 80% 15%, var(--glow) 0%, transparent 45%),
          radial-gradient(circle at 10% 90%, var(--glow-2) 0%, transparent 50%),
          var(--ground);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b0a14;
    --glow: #4c1d95;
    --glow-2: #1e3a8a;
  }
}

.hero {
  background: var(--hero);
}

Remarquez que les lueurs sombres sont plus profondes, pas plus vives. Sur fond sombre, une couleur n’a besoin d’être qu’un peu plus claire que son entourage pour se lire comme de la lumière.

Utiliser light-dark()

La fonction light-dark() renvoie sa première couleur dans un schéma clair et la seconde dans un schéma sombre. Elle a besoin de color-scheme: light dark sur l’élément ou un ancêtre, et elle est prise en charge par les versions actuelles de Chrome, Edge, Safari et Firefox. Elle garde les deux valeurs sur une seule ligne, ce qui facilite la relecture d’une palette.

:root {
  color-scheme: light dark;
}

.card {
  background: linear-gradient(
    180deg,
    light-dark(#ffffff, #1a1530) 0%,
    light-dark(#f5f3ff, #0b0a14) 100%
  );
  color: light-dark(#1e1b2e, #e9e5f5);
}

Prendre en charge un sélecteur de thème manuel

Beaucoup de sites permettent de passer outre le réglage du système. Placez le choix sur l’élément racine et rattachez-y vos variables. La media query gère le défaut ; l’attribut l’emporte quand quelqu’un choisit.

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0b0a14;
  --glow: #4c1d95;
  --glow-2: #1e3a8a;
}

:root[data-theme="light"] {
  color-scheme: light;
}

Réaccorder un dégradé pour le mode sombre

Voici le même dégradé de marque ajusté arrêt par arrêt. Travailler en OKLCH rend l’opération prévisible, car luminosité et chroma sont deux nombres séparés ; OKLCH expliqué montre pourquoi.

Le texte sur les dégradés sombres

Un texte clair sur un dégradé sombre a en général largement assez de contraste, mais vérifiez-le là où le dégradé est le plus lumineux, pas là où il est le plus sombre. Un titre en #e2e8f0 sur #0b0a14 dépasse de loin le 4,5:1 que les WCAG demandent pour le texte courant ; le même titre sur une lueur violette vive peut ne pas y arriver. Évitez aussi le texte courant en blanc pur sur quasi noir : un contraste très élevé provoque un effet de halo chez certains lecteurs, et un blanc cassé doux est plus confortable. Contraste des couleurs et accessibilité donne les chiffres.

Pour d’autres palettes sombres, les fonds dégradés sombres propose un jeu à copier. Et pour les publications sociales et les slides, où vous ne pouvez pas tester chaque ligne à la main, l’Encre automatique de Gradiently choisit un texte clair ou foncé ligne par ligne dans la propre palette du Mark, et le Mark place sa zone la plus calme derrière les mots : un design sombre ne pose donc jamais un titre sur sa lueur la plus vive.