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

[Canonical HTML page](https://gradiently.design/fr/guide/dark-mode-gradients)

Un dégradé qui rayonne discrètement sur blanc peut flamboyer sur un écran sombre. Voici comment réaccorder vos dégradés pour le mode sombre sans perdre leur profondeur, avec le CSS pour prefers-color-scheme, light-dark() et un sélecteur manuel.

## The short version

- Les dégradés en mode sombre doivent être repensés pour le thème sombre, car les couleurs saturées équilibrées sur blanc paraissent dures et éblouissantes sur un fond sombre.
- Sur fond sombre, baissez la chroma des couleurs du dégradé, réservez la couleur vive à de petites zones et utilisez un quasi noir teinté vers la teinte de votre marque plutôt que le noir pur.
- Pour changer de dégradé selon le thème, stockez ses couleurs dans des propriétés personnalisées CSS et redéfinissez-les dans une media query `prefers-color-scheme: dark`.
- La fonction CSS light-dark() choisit entre deux couleurs selon le color-scheme actif, ce qui garde les deux valeurs côte à côte.
- Les dégradés sombres montrent des bandes plus visibles que les clairs : une légère couche de grain vaut la peine en mode sombre.

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](https://gradiently.design/fr/guide/dark-mode-design) couvre le thème dans son ensemble ; cette page parle des dégradés.

- Hero du thème clair: `linear-gradient(135deg, #ede9fe 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Sombre naïf : saturation totale: `linear-gradient(135deg, #7c3aed 0%, #db2777 100%)`
- Sombre réglé : lumière depuis un coin: `radial-gradient(circle at 80% 15%, #4c1d95 0%, #1a1530 45%, #0b0a14 85%)`

Le même dégradé de marque de trois façons. Celui du milieu, c’est ce qui arrive quand on assombrit simplement un design clair : criard, plat, fatigant. Le dernier garde le violet mais le fait rayonner depuis un coin sur un fond teinté.

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

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. **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. **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. **É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. **Ajoutez du grain** Un bruit fin casse les paliers visibles des fondus sombres. [Les dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients) donne la recette.

- Fond: #0b0a14
- Surface: #1a1530
- Surélevé: #2a2148
- Violet profond: #4c1d95
- Accent: #8b5cf6
- Accent de texte: #c4b5fd

Un jeu de dégradés sombres pour une marque violette. La majeure partie de l’écran utilise les trois premières couleurs ; l’accent apparaît par petites touches, et le lilas pâle est réservé au texte et aux icônes.

## 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](https://gradiently.design/fr/guide/css-custom-properties-theming).

```css
: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);
}
```

Comme --hero et ses couleurs vivent sur le même élément, redéfinir les couleurs dans la media query met à jour le dégradé partout où il est utilisé. color-scheme indique aussi au navigateur d’assombrir les barres de défilement et les champs de formulaire.

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.

```css
: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);
}
```

Dans les navigateurs actuels, light-dark() accepte des couleurs, pas des images : utilisez-la pour chaque arrêt plutôt que pour le dégradé entier.

### 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.

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

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

Donner une seule valeur à color-scheme fait aussi suivre le sélecteur à light-dark().

## 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é](https://gradiently.design/fr/guide/oklch-explained) montre pourquoi.

| Arrêt | Thème clair | Thème sombre | Changement |
| --- | --- | --- | --- |
| Fond | `oklch(98% 0.01 295)` | `oklch(15% 0.03 295)` | Quasi noir teinté, pas noir |
| Principal | `oklch(85% 0.09 295)` | `oklch(35% 0.15 295)` | Plus sombre, chroma modérée |
| Accent | `oklch(84% 0.10 350)` | `oklch(40% 0.12 265)` | Décalé vers le froid pour éviter un rose vif aveuglant |
| Accent de texte | `oklch(45% 0.20 295)` | `oklch(82% 0.09 295)` | Plus clair et plus doux pour les petits textes |

La teinte ne bouge pas pour les couleurs principales, si bien que la marque reste reconnaissable dans les deux thèmes.

Hero du thème sombre, en OKLCH: `radial-gradient(circle at 80% 15%, oklch(35% 0.15 295) 0%, transparent 45%), radial-gradient(circle at 10% 90%, oklch(40% 0.12 265) 0%, transparent 50%), linear-gradient(oklch(15% 0.03 295), oklch(15% 0.03 295))`

Les valeurs sombres du tableau, superposées. Copiez-le, puis ajustez la chroma jusqu’à ce que la lueur paraisse chaude plutôt que vive.

## 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é](https://gradiently.design/fr/guide/color-contrast-accessibility) donne les chiffres.

### À éviter en mode sombre

- Un fond noir pur avec des arrêts saturés
- Le dégradé du thème clair, assombri
- De grandes zones de couleur néon
- Des paragraphes en blanc pur
- Des dégradés sombres lisses sans grain

### À faire

- Un fond quasi noir teinté
- Un jeu d’arrêts sombres à part
- La couleur comme une lumière venue d’un coin
- Un texte blanc cassé, autour de `#e9e5f5`
- Une fine couche de bruit pour masquer les bandes

Pour d’autres palettes sombres, [les fonds dégradés sombres](https://gradiently.design/fr/guide/dark-gradient-backgrounds) 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.

## FAQ

### Comment changer un dégradé en mode sombre ?

Placez les couleurs du dégradé dans des propriétés personnalisées CSS et redéfinissez-les dans `@media (prefers-color-scheme: dark)`. Le dégradé se met à jour partout où il utilise ces variables.

### Peut-on utiliser light-dark() dans un dégradé ?

Oui, pour chaque arrêt de couleur, puisque light-dark() renvoie une couleur. Elle a besoin de `color-scheme: light dark` sur l’élément ou un ancêtre.

### Pourquoi mes dégradés paraissent-ils trop lumineux en mode sombre ?

Les yeux s’adaptent aux écrans sombres, donc les couleurs saturées semblent plus fortes. Baissez la chroma, assombrissez les arrêts et réservez la couleur vive à de petites zones.

### Le mode sombre doit-il utiliser le noir pur ?

En général non pour les dégradés. Un quasi noir teinté vers la teinte de votre marque permet aux couleurs de se fondre naturellement et réduit les contrastes durs.

### Pourquoi mon dégradé sombre montre-t-il des bandes ?

Les tons sombres sont très proches les uns des autres en couleur 8 bits, donc les paliers deviennent visibles. Ajoutez une légère couche de grain et évitez une forte compression.