Skip to content
Decksv0.1.0
Docs menu

Theming with theme.json

All colors, fonts and brand fields come from one file, packages/decks/theme/default.json. To restyle a deck, put a theme.json next to its slides.md and include only the keys you want to change:

theme.json
{
  "brand": { "name": "Acme", "url": "acme.example", "logo": null },
  "ramps": { "cyan": ["#2f8f83", "#3fae9f", "#62c7b8", "#9be0d4"] }
}

Merge rules

  • Objects merge key by key; arrays (ramps.<hue>, categorical) are replaced whole.
  • Aliases use {group.token} and {ramps.<hue>.<1-4>}, as in "glows": { "secondary": "{ramps.amber.2}" }. They resolve after the merge, so an alias in the default follows your override.
  • The six hue names (cyan, amber, rose, emerald, violet, slate) are fixed slots: recolor them, don’t rename or add. Each ramp is four #rrggbb colors getting lighter, and step 1 must reach 3:1 contrast against surfaces.canvas.
  • Glows must be hex. Themes stay dark: the-unnamed forces a dark color schema.

In dev, edits to theme.json reload live. They apply at build time too.

Brand

brand is { name, url, "wordmark-gradient", logo }. logo is { "view-box", "svg" } or null for no mark, and url: null hides the cover URL. bunx -p slidev-addon-decks decks new <alias> --brand "Name" --url example.com writes this block for you.

Using the colors

The theme becomes --od-* CSS variables for stylesheets. JavaScript, such as chart specs, reads it through import { theme } from 'slidev-addon-decks/theme' or ink(hue, step) from slidev-addon-decks/story. Hex literals in deck code ignore the deck’s theme. Every variable is listed in theme.json tokens.

examples/od-templates/theme.json is a complete alternate palette and brand; examples/opendata-pitch/theme.json overrides only the brand. The NORMAL and WARM stills on the home page are the same tides slide built with the default theme and with a short theme.json taken from the od-templates palette.

View as Markdown