Les couleurs système peuvent réagir à la valeur color-scheme
actuellement utilisée. La fonction light-dark()
expose la même capacité aux auteurs.
Couleurs système en CSS
En CSS, vous pouvez utiliser plusieurs couleurs parmi l'un des nombreux espaces de couleurs. 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, 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, le CSS inclut des couleurs décrites comme les couleurs système, spécifiées dans le module de couleur CSS niveau 4. Ces couleurs système sont définies par le navigateur et 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'adapte bien à CanvasText
, qui représente le "texte dans le contenu ou les documents de l'application", et est également destiné à être utilisé conjointement.
En CSS, vous pouvez les utiliser comme suit:
body {
color: CanvasText;
background-color: Canvas;
}
Par défaut, CanvasText
donne une couleur proche de black
, et Canvas
est une couleur proche de white
. L'implémentation effective dépend du navigateur. Par exemple, CanvasText
dans Chrome donne #121212
, tandis que Safari indique une #1e1e1e
légèrement plus légère.
L'une des forces cachées 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 le color-scheme
utilisé 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 observer la réaction de la page.
- Lorsqu'elle est définie sur
light dark
, elle indique que l'élément est compatible avec les modes clair et sombre. La valeur à utiliser dépend de la valeur de la condition médiaprefers-color-scheme
. - Lorsqu'elle est définie sur
light
, elle 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 sombres.
Découvrez light-dark()
Jusqu'à présent, la réaction à la valeur color-scheme
utilisée était réservée aux couleurs système. Grâce à light-dark()
, spécifié dans le niveau de module de couleur CSS 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'une des deux est sélectionnée 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 <color>
. Elle peut être utilisée dans les CSS partout où une <color>
est acceptée. Par exemple, dans les propriétés color
et background-color
, mais également dans une fonction telle que 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 en 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é hérite, vous devez généralement la définir sur :root
, mais si vous le souhaitez, vous pouvez choisir de le définir sur un élément spécifique.
Application pratique
Dans l'exemple suivant, quelques propriétés personnalisées représentent les couleurs sur la page. Pour répondre aux besoins du mode sombre, les valeurs de ces propriétés personnalisées sont remplacées par une valeur différente 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;
}
}
Grâce à light-dark()
, ce code peut être simplifié. Étant donné que color-scheme
est défini sur light dark
sur :root
, les valeurs de ces couleurs changent automatiquement lorsque votre système d'exploitation passe du mode clair au mode sombre, 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);
}
En outre, il est possible de forcer une 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, elle est appliquée à :root
.