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:
{
"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#rrggbbcolors getting lighter, and step 1 must reach 3:1 contrast againstsurfaces.canvas. - Glows must be hex. Themes stay dark:
the-unnamedforces 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.