Look and feel

Matter puts its theme into every app page as --matter-* CSS custom properties on :root, and keeps them in step with light, dark and wallpaper mode as the member changes them. It also sets color-scheme to light or dark. Use the variables, and your pages look like part of Matter.

The page and its surfaces

• The page background is transparent (--matter-background: transparent), so the window’s material and the member’s wallpaper show through, the same as behind Matter’s own pages. Don’t paint an opaque page background.
• Cards are translucent (--matter-card, with --matter-card-foreground for their text). Layer them over the page.
• Popovers are opaque (--matter-popover, --matter-popover-foreground). Use them for anything that must cover what’s beneath: menus, dialogs and toasts.

The variables

Group	Variables
Text	--matter-foreground, --matter-muted-foreground, --matter-faint
Surfaces	--matter-background, --matter-card, --matter-card-foreground, --matter-popover, --matter-popover-foreground, --matter-muted, --matter-secondary, --matter-secondary-foreground
Accents	--matter-primary, --matter-primary-text, --matter-primary-foreground
States	--matter-hover, --matter-selected, --matter-selection, --matter-ring
Lines and inputs	--matter-border, --matter-border-light, --matter-input
Status	--matter-destructive, --matter-destructive-foreground, --matter-warning, --matter-success
Radii	--matter-radius-sm, --matter-radius-md, --matter-radius-lg, --matter-radius-xl
Type	--matter-font-sans, --matter-font-mono, --matter-font-size

--matter-primary is a fill, with --matter-primary-foreground for text on it. --matter-primary-text is the primary colour for text on the page.

Status tints

Make tints from the theme, so they work in light and dark:

.badge-won {
  color: var(--matter-success);
  background: color-mix(in srgb, var(--matter-success) 14%, transparent);
}

Fallbacks

The variables arrive as a user-origin style sheet, so your own declarations win. Give fallbacks to keep pages working outside Matter, in tests or a plain browser:

:root {
  font-family: var(--matter-font-sans, system-ui, sans-serif);
  font-size: var(--matter-font-size, 14px);
  color: var(--matter-foreground, #202124);
  background: var(--matter-background, transparent);
}

.card {
  background: var(--matter-card, rgb(255 255 255 / 70%));
  border: 1px solid var(--matter-border, rgb(0 0 0 / 10%));
  border-radius: var(--matter-radius-lg, 10px);
}

.menu {
  background: var(--matter-popover, #fff);
  color: var(--matter-popover-foreground, #202124);
}