Theming

Try it

Every control below sets one custom property on the stage. No classes are swapped and no script runs — the components re-render because none of them reference a raw value. This is the entire theming argument, made interactively.

Override the roles

Load your theme file after Core and redeclare on :root. Because components reference roles rather than the palette, this repaints buttons, links, focus rings, borders, alerts, tables and the mesh in one go.

:root {
  --pf-bg: #0f172a;
  --pf-bg-deep: #020617;
  --pf-accent: #38bdf8;
  --pf-accent-2: #fb7185;
  --pf-text: #e2e8f0;
  --pf-text-muted: #94a3b8;
  --pf-border: rgba(148, 163, 184, .22);
  --pf-border-strong: rgba(56, 189, 248, .45);
  --pf-focus: #38bdf8;
  --pf-base-950: #04121f;
}

Light islands

Add .pf-invert to any element — the body, one section, a single card — and the roles flip to a light palette inside it. Nested components follow automatically because they were never referencing the palette in the first place.

Shape and density

Two properties change the personality of the whole framework without touching a component.

• --pf-cut sets the depth of the clipped corner on .pf-facet and .pf-card--facet. Set it to 0 and every angular surface becomes a plain rectangle.
• --pf-radius-lg drives cards, plan cards, heroes and CTA bands. Drop it to 4px for a sharper, more technical feel, or raise it to 32px for a softer one.

Density is the space scale. Multiplying the four largest steps tightens every section, grid and stack at once, because nothing hard-codes padding:

:root {
  --pf-space-6: 1.5rem;
  --pf-space-7: 2rem;
  --pf-space-8: 3rem;
  --pf-space-9: 4rem;
  --pf-cut: 0px;
}

Scoped themes

Roles are inherited, so scoping a theme to part of the page is the same technique with a different selector. This is how you give one section its own accent without a second stylesheet:

.promo {
  --pf-accent: var(--pf-hue-2);
  --pf-border-strong: rgba(229, 177, 137, .45);
}

Everything inside .promo — buttons, links, markers, focus rings — picks up the orange. Everything outside is untouched.

Anatomy of a theme file

A theme is a stylesheet that redeclares roles. It loads after Core and nothing else about the framework changes. The four shipped with the site are each under forty lines.

/* Monospace display face, no mesh, tight radii. */
:root {
  --pf-bg: #0d1117;
  --pf-bg-deep: #010409;
  --pf-text: #e6edf3;
  --pf-text-muted: #8b949e;
  --pf-accent: #7dd3fc;
  --pf-base-950: #04121f;
  --pf-font-display: "IBM Plex Mono", ui-monospace, monospace;
  --pf-radius-lg: 6px;
  --pf-cut: 0px;
  --pf-mesh: none;
}

The eleven roles that carry a theme

The one duty a theme cannot skip

Recolour the accent and you have changed the contrast of every button label, link and focus ring on the site. A pastel that reads at 10.7:1 on deep navy reads at 1.6:1 on near-white — the same hex, a different page.

Scoping a theme to part of a page

Roles are inherited custom properties, so declaring them on an element themes that subtree and nothing else. This is how .pf-invert works and how the playground retints a live page without touching the page around it.

/* One section on a warm palette, the rest of the page untouched. */
.promo {
  --pf-bg: #171310;
  --pf-accent: #f5b544;
  --pf-base-950: #1a1208;
  background: var(--pf-bg);
}

Two cautions. A scoped theme must set its own background, because redeclaring --pf-bg does not repaint anything by itself. And .pf-invert uses a doubled class to reach specificity (0,2,0), because a component declared later in the cascade would otherwise win with a single class.

Beyond colour

Next: the component reference.