Les couleurs système peuvent réagir à la valeur color-scheme
actuellement utilisée. La fonction light-dark()
offre la même fonctionnalité aux auteurs.
Couleurs système en CSS
En CSS, vous pouvez utiliser de nombreuses couleurs issues de 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, ou la fonction color()
plus générique.
Par exemple, la couleur nommée cornflowerblue
peut également être représentée sous la forme #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 des couleurs système, spécifiées dans le niveau 4 du module de couleurs CSS. 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 se marie bien avec CanvasText
, qui représente le "texte dans le contenu ou les documents de l'application", et est également conçu pour être utilisé en conjonction avec celui-ci.
En CSS, vous les utilisez comme suit :
body {
color: CanvasText;
background-color: Canvas;
}
Par défaut, CanvasText
génère une couleur proche de black
et Canvas
une couleur proche de white
. L'implémentation réelle dépend du navigateur. Par exemple, CanvasText
dans Chrome génère #121212
, tandis que Safari spécifie #1e1e1e
, une couleur légèrement plus claire.
Ces couleurs système ont une capacité cachée : elles peuvent répondre à la valeur calculée de la propriété color-scheme
. Par exemple, les valeurs de CanvasText
et de 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 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 à utiliser dépend de la valeur de la condition de contenu multimédiaprefers-color-scheme
. - Lorsque ce paramètre est défini sur
light
, cela signifie que l'élément est compatible avec un jeu de couleurs clair. - Lorsque cette valeur est définie sur
dark
, cela signifie que l'élément est compatible avec un jeu de couleurs sombre.
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 5 du module de couleur CSS, vous pouvez désormais également utiliser cette fonctionnalité.
light-dark()
est une fonction qui accepte deux arguments, qui doivent tous deux être des <color>
. L'une des deux options est choisie 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é dans le 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 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
. Étant donné que cette propriété hérite, vous la définissez généralement sur :root
, mais si vous le souhaitez, vous pouvez la définir sur un élément spécifique.
Application pratique
Dans l'exemple suivant, quelques propriétés personnalisées représentent les couleurs de la page. Pour répondre au mode sombre, les valeurs de ces propriétés personnalisées sont remplacées par une valeur différente dans une condition multimé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 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);
}
En outre, vous pouvez 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, cela s'applique à :root
.