Light-dark() - Fonction CSS

Schéma syntaxique de light-dark()..

Description des termes utilisés sur le schéma :

• c1 et c2 sont deux couleurs, exprimées dans une des syntaxes reconnues par CSS (voir Les couleurs.

Description de la fonction light-dark().

light-dark() permet de choisir entre deux couleurs, une pour le mode d'affichage clair, l'autre pour le mode d'affichage foncé. La basculement d'une couleur à l'autre est automatique en fonction du mode d'affichage actuel.

light-dark() est surtout utile pour les éléments qui ne sont pas des contrôles de formulaire, ni des barres de défilement car ces élément sont automatiquement basculé d'une couleur à l'autre en fonction de la palette utilisée.

Voyez également la propriété color-scheme qui permet de basculer en mode sombre ou en mode clair.

La valeur light-dark() peut être utilisée avec les propriétés suivantes :

• accent-color : Définit la couleur des élément actifs, cochés.
• background-color : Définit la couleur en arrière-plan.
• border-color : Définit la couleur des bordures pour les 4 cotés de l'élément.
• caret-color : Choisit la couleur du marqueur de texte (curseur clignotant).
• color : Définit la couleur de l'avant plan et affecte une valeur à currentcolor.
• column-rule-color : Définit la couleur des filets de séparation de colonnes, dans le contexte d'une mise en page multi-colonnes, d'un conteneur grille ou d'un conteneur flex.
• fill-color : Définit la couleur des remplissages en SVG.
• flood-color : Définit la couleur des remplissages et des ombrages dans le contexte de filtres SVG.
• lighting-color : Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.
• outline-color : Définit la couleur du contour (outline).
• scrollbar-color : Définit deux couleurs qui seront utilisées pour les barres de défilement.
• stop-color : Définit la couleur d'un point de stop dans un dégradé.
• text-decoration-color : Définit la couleur du trait de décoration (souligné, rayure...).
• text-emphasis-color : Définit la couleur des caractères de mise en exergue.

Syntaxes de la fonction light-dark().

• [propriété]: light-dark(yellow, blue); c1 c2

  c1 est la couleur pour le mode clair ou tout autre mode qui n'est pas dark. c2 est la couleur pour le mode foncé (dark).

Exemples d'utilisation de la fonction light-dark().

Cette page a été adaptée (en partie) pour un basculement d'une palette claire à une palette foncée. Les titres h1, h2 et h3, les bandeaux de syntaxe, et la table des matières ont des couleurs qui s'adaptent à la palette.

Support de la fonction light-dark().

1

Fonction
light-dark()

Estimation de la prise en charge globale.

87%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Safari

Opéra

Safari sur IOS

Firefox pour Androïd

Chrome

Firefox

Edge

Chrome pour Androïd

Androïd Brower

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction light-dark().

• Module CSS - Ajustement des couleurs - Niveau 1

  Concernant light-dark(). Introduction de la fonction light-dark() (adaptation aux schémas d'affichage clair et foncé).
  

  21 Mai 2019

  Document de travail.

  

  10 Février 2022

  Candidat à la recommandation.

  

  

Voir aussi, au sujet de l'ajustement des couleurs...

Les spécifications CSS éditées par le W3C sont organisées en modules. La fonction light-dark() fait partie du module Module CSS - Ajustement des couleurs, ainsi que les autres fonctions et propriétés ci-après.

Propriétés :

Fonctions :