Skip to content
Hypermedia Components

Theming

This section is the practical side of theming: which attribute to set, which built-in themes exist, and how to generate your own. (The token pipeline behind it — DTCG sources, layers, naming — lives in Fundamentals · Tokens.)

Every visual decision in Hypermedia Components flows through four layers:

  1. DTCG JSON sources — primitive, semantic, component, and theme token files are the single source of truth.
  2. A build step emits them as --hc-* CSS custom properties.
  3. The semantic classes (hc-button, hc-card, …) consume only those variables — never hard-coded values.
  4. Runtime axes — plain HTML attributes — re-resolve the variables, so one attribute restyles everything at once, with no rebuild.

Fundamentals · Tokens covers the layer model, the DTCG reference syntax, and variable naming in depth.

The five runtime axes

Section titled “The five runtime axes”
Axis Values Default (no attribute) Set on Docs
data-theme light / dark OS preference (prefers-color-scheme) <html> Light and dark
data-color accent theme — default, indigo, emerald, rose, amber default (blue) <html> Color themes
data-neutral gray ramp — gray, slate, zinc, neutral, stone gray <html> Neutral ramps
data-density comfortable / compact / dense comfortable <html> Density
dir ltr / rtl ltr <html> Right-to-left

All five are orthogonal — set any combination. Each also works on any subtree, not just <html>, so a section can run dark or dense on its own.

Change your brand color

Section titled “Change your brand color”

Open the Theme builder, paste one brand color, and copy out a ready-to-paste CSS block (or the DTCG source). It runs the real token build in your browser and checks WCAG contrast live.

In this section

Section titled “In this section”