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”
AxisValuesDefault (no attribute)Set onDocs
data-themelight / darkOS preference (prefers-color-scheme)<html>Light and dark
data-coloraccent theme — default, indigo, emerald, rose, amberdefault (blue)<html>Color themes
data-neutralgray ramp — gray, slate, zinc, neutral, stonegray<html>Neutral ramps
data-densitycomfortable / compact / densecomfortable<html>Density
dirltr / rtlltr<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”