DocsReferenceTheming

Vinum ships no colours. It ships the places colours go — a set of `--vinum-*` CSS variables that style the public renderer and the entire admin alike. Set them once and both change together, which is why the admin on this site looks like this site rather than like a dashboard.

Set them

app/app.css
@import "tailwindcss";@source "../node_modules/@vinumcms/react/src";@source "../node_modules/@vinumcms/admin/src"; :root {  --vinum-bg: #f6f6f2;  --vinum-fg: #16202e;  --vinum-accent: #16202e;  --vinum-border: rgba(22, 32, 46, 0.22);  --vinum-font-display: "Old Standard TT", serif;}

Anything you leave out falls back to Vinum's default, so a site can set four variables and look deliberate. The `@source` lines are not optional — Tailwind skips `node_modules`, and without them the admin renders completely unstyled while nothing errors.

What the groups do

Surfaces — `--vinum-bg`, `--vinum-bg-raised`, `--vinum-bg-invert`. The page, a panel on it, and the inverted plate a section can sit on.

Ink — `--vinum-fg`, `--vinum-fg-dim`, `--vinum-fg-faint`, and their `-invert` partners. Body text, secondary text, and hairlines. `faint` is a fill, not a text colour: it is a low-alpha ink and reads as nothing when it lands on words.

Accent — `--vinum-accent`, `--vinum-accent-soft`, `--vinum-on-accent`. What draws the eye, and what stays readable on top of it.

Borders — `--vinum-border` and `--vinum-border-strong`. A hairline, and a line that means something.

Type — `--vinum-font-display`, `--vinum-font-body`, `--vinum-font-mono`, `--vinum-measure`.

Pairs, not single colours

Each tone names a background and the foreground that stays legible on it. That pairing is the whole reason an author gets a `tone` control and not a colour picker: two independent controls is exactly how text ends up unreadable on an accent background, and the pairing makes it impossible.

What is not themeable

Layout. Spacing, widths and the structure of a block are decided by whoever wrote the block, not by a variable and not by an author. A `space` variant was built and then removed for contradicting that, and the reasoning is in `docs/DECISIONS.md`.

The one placement choice an author does get is `align`, admitted deliberately and after the rule was changed on purpose rather than by accumulation.

Dark mode

There is no dark mode switch, because there is nothing to switch: redefine the same variables under whatever selector you like — a media query, a class, an attribute — and everything follows, admin included.