CSSFontPaletteValuesRule: basePalette property

Baseline 2022
Newly available

Since November 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The read-only basePalette property of the CSSFontPaletteValuesRule interface indicates the base palette associated with the rule.

Value

A string that can be one of the following color values:

light

Matches the first palette in the font file that is marked as applicable to a light background, that is, close to white. If there is no palette in the font or if no palette has the required metadata, the value is equivalent to "0", that is, the first palette in the font.

dark

Matches the first palette in the font file that is marked as applicable to a dark background, that is, close to black. If there is no palette in the font or if no palette has the required metadata, the value is equivalent to "0", that is, the first palette in the font.

a string containing an index (like "0", "1", …)

Matches the palette corresponding to the index. The first palette corresponds to "0".

Examples

Read the associated base palette

This example adds rules in an extra stylesheet added to the document, returned as the last stylesheet in the document (document.styleSheets[document.styleSheets.length-1].cssRules). So, rules[2] returns the first CSSFontPaletteValuesRule object, and rules[3] the second one.

HTML

html
<h2>default base-palette</h2>
<h2 class="two">base-palette at index 2</h2>
<h2 class="five">base-palette at index 5</h2>
<pre id="log"></pre>

CSS

css
@import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");

h2 {
  font-family: "Nabla";
}

@font-palette-values --two {
  font-family: "Nabla";
  base-palette: 2;
}

@font-palette-values --five {
  font-family: "Nabla";
  base-palette: 5;
}

.two {
  font-palette: --two;
}

.five {
  font-palette: --five;
}

JavaScript

js
const log = document.getElementById("log");

const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const twoRule = rules[2]; // A CSSFontPaletteValuesRule interface
const fiveRule = rules[3]; // A CSSFontPaletteValuesRule interface

log.textContent = `The ${twoRule.name} @font-palette-values base palette is: ${twoRule.basePalette}\n`;
log.textContent += `The ${fiveRule.name} @font-palette-values base palette is: ${fiveRule.basePalette}`;

Result

Specifications

Specification
CSS Fonts Module Level 4
# dom-cssfontpalettevaluesrule-basepalette

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
basePalette

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also