Color

Components read color roles, not colors: primary, surface-container, on-surface and the rest. A scheme assigns every role a color for light and dark, either the baseline scheme or one generated from your seed color.

Build a scheme

Pick a seed color and a scheme variant. Material Color Utilities 0.4.0 derives tonal palettes from it and maps every role, for the contrast level and color spec you choose. The swatches and the CSS below update together; the CSS is what createTheme returns for those options, scoped to a selector. Use on this site applies the theme to every page, components included.

Dynamic color

• Variants: tonalSpot (default), expressive, vibrant, neutral, monochrome, fidelity, content, rainbow and fruitSalad. Each is a DynamicScheme of Material Color Utilities that moves the roles' hue and chroma differently from the seed; expressive is deliberately detached from it.
• Contrast: from −1 to 1, where 0 is standard; the presets are standard (0), medium (0.5) and high (1). Color spec 2025 treats negative contrast as standard.
• Color spec: 2025 is the default (DECISIONS D3) and adds the -dim roles; 2021 stays selectable. Material Color Utilities itself still defaults to 2021, so createTheme always passes the version explicitly.
• Dark mode: mode: 'system' writes both schemes and follows prefers-color-scheme; data-theme="light" or "dark" on an ancestor forces one.

import { createTheme } from '@kyralabs/m3exp-web/theme';

const { cssText } = createTheme({ seed: '#6750a4', variant: 'expressive', contrast: 'medium' });
document.head.append(Object.assign(document.createElement('style'), { textContent: cssText }));

Roles of the baseline scheme

Without a seed theme the components use the baseline scheme in @kyralabs/m3e-tokens/theme.css: Compose's expressive light scheme (its on-*-container roles are tone 30, not 10) and the dark scheme. Each role is a custom property, --m3e-sys-color-<role>. The swatches show the current theme of this site; the values are the baseline's.

Primary

Secondary

Tertiary

Error

Surface and background

Other

Sources

• Roles, variants, contrast and spec versions: @material/material-color-utilities 0.4.0 (dynamiccolor/, scheme/; FOUNDATIONS_SPEC §1).
• Baseline scheme: Compose ColorLightTokens, ColorDarkTokens, PaletteTokens and expressiveLightColorScheme() (ColorScheme.kt L1172–1179) at the pinned commit, generated by m3e-codegen.