Crafting a VibeDeck Theme

Two ways to a theme

In the browser — sign in and open the theme builder. Pick your colours, fonts, and shape tokens, save under a name, and set that name as your deck's theme:. No code, and it can't break anything: the builder only writes the safe token block.

As a CSS file — running your own instance? Built-in themes are plain CSS files in src/styles/themes/, and you can add your own.

Either way, every reader of your deck sees your theme — not just you.

How a deck picks its theme

A deck names its theme in frontmatter:

theme: operazione-stile

Built-in names map straight to a file — themes/operazione-stile.css. Any other name looks up a theme you built under that name. No match? The deck falls back to default.

The token contract

Components never hardcode colours — they read --vd-* variables. A theme's whole job is to define that set on :root:

:root {
  --vd-bg: #0f172a;
  --vd-text: #e2e8f0;
  --vd-accent: #818cf8;
}

default.css is the canonical list. The theme builder exposes the same tokens as controls — same contract, no syntax.

Light and dark

The toggle sets data-mode on the page's root element. A theme supports light mode by overriding the same tokens under a matching selector:

:root[data-mode="light"] {
  --vd-bg: #f1ecdd;
  --vd-text: #2e231b;
}

Define only what changes; everything else inherits from the dark defaults.

Restyling components (CSS-file themes)

In a theme file, you can go beyond colours by targeting a card's body with an ancestor chain — specific enough to beat the components' scoped styles:

.reader__stage .reader__card .card-body--quote {
  border-left: 4px solid var(--vd-accent);
  font-style: italic;
}

This is how the bespoke themes add stamps, rules, and textures. (The in-browser builder deliberately stays in token territory — that's what keeps it safe.)