Themes

Theme records, flipped live

Every record in themes/ is a button. The mode control beside it is the other axis — a record binds seeds for light and dark, and the mode decides which half you are looking at.

Theme

Palette

Text

Heading

Weight

Undertone

Radius

Mode

Share

Custom primary · light

A

What the record binds

Primary
--mk-primary

Secondary
--mk-secondary

Ink
--bs-body-color

Muted ink
--bs-secondary-color

Ground
--bs-body-bg

Ground 2
--bs-tertiary-bg

Type

The display face carries the headings.

The text face carries everything else — this lead, the body copy under it, and the small print. A record can bind them separately, and they need not come from the same place: one self-hosted, one external, both just URLs.

Body copy at the default weight, so a record's family-base is legible against its own ground rather than against the reference's.

Controls and surfaces

Primary Outline Naked

Radius: surface

A card

Its corner is the record’s surface radius; the button above takes the control radius.

Radius: sm

Barely rounded

The same card at a different step on the scale.

Radius: none

Square

Both faces, both grounds, one border colour.

A pattern in the record’s colours

The markers take the primary.

  1. Bind a record

    One JSON file: colours, radii, type, and a dark override.

  2. Flip it here

    Every record in themes/ shows up as a button on this page.

  3. Ship it

    data-mk-theme on the html element, and nothing else changes.