override-colors

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis novembre 2022.

Le descripteur CSS override-colors de la règle @ @font-palette-values est utilisé pour remplacer les couleurs de la palette de base choisie pour une police couleur.

Syntaxe

css

/* syntaxe de base */
override-colors: <index of color> <color>;

/* utilisant des noms de couleur */
override-colors: 0 red;

/* utilisant une couleur hexadécimale */
override-colors: 0 #ff0000;

/* utilisant rgb */
override-colors: 0 rgb(255 0 0);

/* remplaçant plusieurs couleurs */
override-colors:
  0 red,
  1 green,
  2 blue;

Le descripteur override-colors accepte une liste séparée par des virgules composée d'indices de couleur et de nouvelles valeurs de couleur.

L'indice de couleur commence à zéro et toute valeur de couleur peut être utilisée.

Pour chaque paire indice-couleur, la couleur à l'indice spécifié dans la palette de base sera remplacée. Si la police couleur ne possède pas de couleur à l'indice indiqué, cette valeur sera ignorée.

Valeurs

[ <integer [0,∞]> <absolute-color-base> ]: Définit l'indice d'une couleur dans une palette de base et la couleur avec laquelle la remplacer.

Définition formelle

En lien avec les règles @	`@font-palette-values`
Valeur initiale	`n/a (required)`
Valeur calculée	comme spécifié

Syntaxe formelle

override-colors = 
  [ <integer [0,∞]> <color> ]#  

<integer> = 
  <number-token>

Exemples

Modifier les couleurs des emojis

Cet exemple montre comment remplacer les couleurs de la police couleur Noto Color Emoji pour les adapter à l'identité visuelle de votre site.

HTML

html

<section class="hats">
  <div class="hat">
    <h2>Chapeau original</h2>
    <div class="emoji">🎩</div>
  </div>
  <div class="hat">
    <h2>Chapeau rouge</h2>
    <div class="emoji red-hat">🎩</div>
  </div>
</section>

CSS

.hats {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

css

@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url("https://fonts.gstatic.com/l/font?kit=Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabts6diywYkdG3gjD0U&skey=a373f7129eaba270&v=v24")
    format("woff2");
}

.emoji {
  font-family: "Noto Color Emoji", emoji;
  font-size: 3rem;
}
@font-palette-values --red {
  font-family: "Noto Color Emoji";
  override-colors:
    0 rgb(74 11 0),
    1 rgb(149 22 1),
    2 rgb(183 27 1),
    3 rgb(193 28 1),
    4 rgb(230 34 1);
}
.red-hat {
  font-palette: --red;
}

Résultat

Modifier une couleur dans une palette de base alternative

En utilisant la police Rocher Color Font, cet exemple montre comment remplacer une couleur dans la police.

HTML

html

<h2 class="normal-palette">Palette normale</h2>
<h2 class="override-palette">Palette modifiée</h2>

CSS

css

@font-face {
  font-family: "Rocher";
  src: url("[chemin-vers-la-police]/RocherColorGX.woff2") format("woff2");
}
h2 {
  font-family: "Rocher", fantasy;
}
@font-palette-values --override-palette {
  font-family: "Rocher";
  base-palette: 3;
}
@font-palette-values --override-palette {
  font-family: "Rocher";
  base-palette: 3;
  override-colors: 0 rebeccapurple;
}
.normal-palette {
  font-palette: --normal-palette;
}
.override-palette {
  font-palette: --override-palette;
}