Couleurs CSS dépendantes du schéma de couleurs avec light-dark()

Réussite : cette fonctionnalité Web est désormais disponible dans les trois principaux moteurs de navigateur et devient Baseline Newly available à partir du 13 mai 2024.

Les couleurs du système peuvent réagir à la valeur color-scheme actuellement utilisée. La fonction light-dark() offre la même fonctionnalité aux auteurs.

Bramus

Couleurs système en CSS

En CSS, vous pouvez utiliser de nombreuses couleurs de l'un des nombreux espaces colorimétriques. Par exemple, vous pouvez utiliser des couleurs nommées, des couleurs hexadécimales, des fonctions de couleur associées à un espace colorimétrique spécifique ou la fonction color() plus générique.

Par exemple, la couleur nommée cornflowerblue peut également être représentée par #6495ED, hsl(218.54deg 79.19% 66.08%) ou color(display-p3 0.43 0.58 0.9).

En plus de ces différents noms et formats, CSS inclut des couleurs décrites comme des couleurs système, spécifiées dans le module de couleur CSS de niveau 4. Ces couleurs système sont définies par le navigateur et sont représentées par un mot clé.

Par exemple, la couleur système Canvas (à ne pas confondre avec l'élément <canvas>) représente l'"arrière-plan du contenu ou des documents de l'application". Il s'associe bien avec CanvasText, qui représente le "texte dans le contenu ou les documents de l'application", et est également destiné à être utilisé conjointement avec celui-ci.

En CSS, vous les utilisez comme suit :

body {
  color: CanvasText;
  background-color: Canvas;
}

Par défaut, CanvasText donne une couleur proche de black et Canvas donne une couleur proche de white. L'implémentation réelle dépend du navigateur. Par exemple, CanvasText dans Chrome donne #121212, tandis que Safari l'affiche avec une nuance légèrement plus claire : #1e1e1e.

L'un des avantages cachés de ces couleurs système est qu'elles peuvent répondre à la valeur calculée de la propriété color-scheme. Par exemple, les valeurs de CanvasText et Canvas sont inversées lorsque la valeur color-scheme utilisée est dark.

:root {
  color-scheme: dark;
}

body {
  color: CanvasText;
  background-color: Canvas;
}

Dans la démonstration suivante, vous pouvez modifier la valeur de color-scheme définie sur :root et voir comment la page réagit.

• Lorsqu'elle est définie sur light dark, elle indique que l'élément est compatible avec les modes clair et sombre. Le choix de la valeur utilisée dépend de la valeur de la condition de média prefers-color-scheme.
• Lorsqu'il est défini sur light, il indique que l'élément est compatible avec un jeu de couleurs clair.
• Lorsqu'elle est définie sur dark, elle indique que l'élément est compatible avec un jeu de couleurs sombre.

Une page qui vous permet de modifier la valeur de color-scheme. Lors du changement, les couleurs de la page changent lorsque vous passez du mode clair au mode sombre ou inversement, même si les déclarations sur l'élément body restent les mêmes.

Découvrez light-dark()

Browser Support

• 123
• 123
• 120
• 17.5

Source

Jusqu'à présent, la réaction à la valeur color-scheme utilisée était réservée aux couleurs du système. Grâce à light-dark(), spécifié dans le module de couleur CSS niveau 5, vous disposez désormais de la même fonctionnalité.

light-dark() est une fonction qui accepte deux arguments, qui doivent tous deux être de type <color>. L'un des deux est choisi en fonction du jeu de couleurs utilisé.

• Si le jeu de couleurs utilisé est light ou inconnu, la valeur calculée de la première valeur est renvoyée.
• Si le jeu de couleurs utilisé est dark, la valeur calculée de la deuxième couleur est renvoyée.

Le résultat de light-dark() est un <color>. Il peut être utilisé en CSS partout où un <color> est accepté. Par exemple, dans les propriétés color et background-color, mais aussi dans une fonction comme linear-gradient().

Dans l'exemple suivant, la couleur d'arrière-plan utilisée est #333 en mode sombre ou #ccc en mode clair (ou un mode inconnu).

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ccc, #333);
}

Notez que pour que light-dark() fonctionne correctement, vous devez spécifier un color-scheme. Comme cette propriété est héritée, vous la définissez généralement sur :root, mais vous pouvez choisir de la définir sur un élément spécifique si vous le souhaitez.

Application pratique

Dans l'exemple suivant, quelques propriétés personnalisées représentent des couleurs sur la page. Pour s'adapter au mode sombre, les valeurs de ces propriétés personnalisées sont remplacées par une autre valeur dans une condition média prefers-color-scheme.

:root {
  --primary-color: #333;
  --primary-background: #e4e4e4;
  --highlight-color: hotpink;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #fafafa;
    --primary-background: #121212;
    --highlight-color: lime;
  }
}

Une page qui s'adapte au mode clair ou sombre via prefers-color-scheme.
Les valeurs de couleur sont modifiées en CSS à l'aide d'une requête média.

Grâce à light-dark(), ce code peut être simplifié. Comme color-scheme est défini sur light dark sur :root, les valeurs de ces couleurs changent automatiquement lorsque vous passez du mode clair au mode sombre de votre OS, et inversement.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

Page qui répond au mode clair ou sombre à l'aide de prefers-color-scheme.
Les valeurs de couleur sont modifiées à l'aide de light-dark().

En prime, il est possible de forcer une certaine sous-arborescence du DOM à n'utiliser que le mode clair ou sombre en définissant color-scheme sur dark ou light. Dans l'exemple suivant, cela est appliqué à :root.

Une page qui répond au mode clair ou sombre à l'aide de prefers-color-scheme.
Les valeurs de couleur sont modifiées à l'aide de light-dark().
L'une des options vous permet de forcer un mode clair ou sombre. Pour ce faire, vous devez manipuler la valeur color-scheme.