CSSFontPaletteValuesRule.overrideColors — Eigenschaft · JavaScript-Referenz

Signatur

CSSFontPaletteValuesRule.overrideColors

Beschreibung

Die Eigenschaft overrideColors des Interfaces CSSFontPaletteValuesRule gibt den Wert des CSS-Deskriptors override-colors als String zurück. Dieser Deskriptor legt fest, welche Farben aus der Palette einer Farbschrift (z. B. COLRv0/COLRv1-Schriften) ersetzt werden sollen. Jeder Eintrag besteht aus einem nullbasierten Farbindex und einer CSS-Farbe, z. B. 0 red, 1 #00f.

Nützlich ist die Eigenschaft vor allem, um im laufenden Betrieb zu prüfen, welche Palettenanpassungen aktiv sind. Beispiele sind Theme-Editoren, Debugging-Werkzeuge oder die Synchronisierung von Schriftfarben mit anderen UI-Elementen. Zusammen mit basePalette ergibt sich die komplette Palette: Die Grundpalette wird aus base-palette übernommen, und override-colors überschreibt einzelne Einträge davon.

Die Eigenschaft ist schreibgeschützt. Wenn du die Farben ändern willst, entfernst du die Regel mit CSSStyleSheet.deleteRule() und legst sie mit insertRule() neu an. Ist in der Regel kein override-colors gesetzt, liefert die Eigenschaft einen leeren String.

Rückgabewert

Typ

string

Beschreibung

Der serialisierte Wert von override-colors, etwa "0 red, 1 blue". Ist der Deskriptor nicht gesetzt, ist das Ergebnis ein leerer String "".

Beispiele

Wert einer @font-palette-values-Regel auslesen

// Stylesheet mit einer Palettenregel einfügen
const style = document.createElement('style');
style.textContent = `
  @font-palette-values --markenfarben {
    font-family: Bixa;
    override-colors: 0 red, 1 blue;
  }
`;
document.head.append(style);

const rule = [...style.sheet.cssRules]
  .find((r) => r instanceof CSSFontPaletteValuesRule);

console.log(rule.name);           // Name der Palette
console.log(rule.overrideColors); // überschriebene Farben

--markenfarben 0 red, 1 blue

overrideColors in eine Map aus Index und Farbe zerlegen

// Trennt nur an Kommas auf oberster Ebene, damit z. B. rgb(0, 128, 255) erhalten bleibt
const splitTopLevel = (str) => {
  const parts = [];
  let depth = 0;
  let current = '';
  for (const ch of str) {
    if (ch === '(') depth++;
    if (ch === ')') depth--;
    if (ch === ',' && depth === 0) {
      parts.push(current.trim());
      current = '';
    } else {
      current += ch;
    }
  }
  if (current.trim()) parts.push(current.trim());
  return parts;
};

const parseOverrideColors = (value) =>
  new Map(
    splitTopLevel(value).map((entry) => {
      const [index, ...color] = entry.split(/\s+/);
      return [Number(index), color.join(' ')];
    })
  );

console.log(parseOverrideColors('0 red, 1 rgb(0, 128, 255)'));

Map(2) { 0 => 'red', 1 => 'rgb(0, 128, 255)' }

Palette ändern, indem die Regel ersetzt wird (Eigenschaft ist schreibgeschützt)

const replacePaletteColors = (sheet, paletteName, newColors) => {
  const rules = [...sheet.cssRules];
  const index = rules.findIndex(
    (r) => r instanceof CSSFontPaletteValuesRule && r.name === paletteName
  );
  if (index === -1) return null;

  const old = rules[index];
  sheet.deleteRule(index);
  sheet.insertRule(
    `@font-palette-values ${paletteName} {
      font-family: ${old.fontFamily};
      ${old.basePalette ? `base-palette: ${old.basePalette};` : ''}
      override-colors: ${newColors};
    }`,
    index
  );
  return sheet.cssRules[index].overrideColors;
};

const sheet = document.styleSheets[0];
console.log(replacePaletteColors(sheet, '--markenfarben', '0 green, 1 gold'));

0 green, 1 gold

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie rule.overrideColors = '0 red' hat keine Wirkung und wirft im Strict Mode keinen Fehler. Die Regel bleibt unverändert. Zum Ändern die Regel neu einfügen (siehe Beispiel 3).
Serialisierung: Der Browser gibt den Wert in seiner eigenen Normalform zurück. Schreibweise, Leerzeichen und Farbformat (z. B. #f00 gegenüber rgb(255, 0, 0)) können vom Quelltext abweichen. Ein Vergleich per String-Gleichheit ist deshalb unzuverlässig.
Kommas in Farbfunktionen: Ein einfaches split(',') zerlegt Werte wie rgb(0, 128, 255) falsch. Trenne nur an Kommas auf oberster Ebene.
Wirkung nur bei Farbschriften: Die Überschreibung greift nur, wenn die Schrift Farbpaletten mitbringt (Tabellen COLR/CPAL) und das Element die Palette über font-palette: --name verwendet. Indizes, die in der Schrift nicht vorkommen, werden ignoriert.
Kompatibilität: Unterstützt ab Chrome/Edge 101, Firefox 107 und Safari 15.4. Mit 'CSSFontPaletteValuesRule' in window kannst du vorher prüfen, ob der Browser die Regel kennt.
Aus Stylesheets anderer Herkunft (Cross-Origin) ohne CORS-Freigabe lässt sich cssRules nicht lesen. Der Zugriff wirft dann einen SecurityError.

Siehe auch

CSSFontPaletteValuesRule CSSFontPaletteValuesRule.name CSSFontPaletteValuesRule.basePalette CSSFontPaletteValuesRule.fontFamily CSSFontFeatureValuesRule.ornaments