Support

Version 3.0 targets Baseline widely available: the web platform features it uses have worked in all major browsers for at least 30 months. Newer features (such as corner-shape or light-dark()) are only used behind @supports guards or with a fallback, so components stay usable in older engines. The repository checks this with npm run gb:baseline. See Browser support for the minimum versions.

Components read --md-sys-color-* tokens. Override the key color a component uses on the element or a class. Buttons use primary, and the states (hover, focus, pressed) are derived from it.

<md-gb-button class="danger" color="filled">Delete</md-gb-button>

md-gb-button.danger {
  --md-sys-color-primary: var(--md-sys-color-error);
  --md-sys-color-on-primary: var(--md-sys-color-on-error);
}

The tokens use light-dark(), so they follow the color-scheme property. Set it to follow the system, or force a scheme on any subtree.

<div class="always-dark">
  <md-gb-button color="filled">Save</md-gb-button>
  <md-gb-button color="outlined">Cancel</md-gb-button>
</div>

:root {
  color-scheme: light dark;
}

.always-dark {
  padding: 16px;
  color-scheme: dark;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

Generate a theme from a source color at runtime, or export a stylesheet.

<md-gb-button color="filled">Save</md-gb-button>

import {applyTheme} from '@material/web/labs/gb/styles/color/dynamic-color.js';

applyTheme(document, {source: '#006a6a'});

You can also design a scheme with the Material Theme Builder Figma plugin. See Color.

Use CSS ::part(). The parts of each component are listed under its CSS parts in the API reference.