Themes

A theme is three choices in dokk.toml, the way Basecoat themes: a style pack for shape and density, a base color for every surface and text color, and an optional accent color on top.

dokk.toml

[theme]
style = "rhea"
base = "zinc"
color = "pink"

Only the chosen style pack is copied into your site.

Styles #

A style pack sets the size of controls, corner radius and spacing. Measured on a default button, input and card:

Style	Controls	Corners	Feel
`vega` (default)	36px	8px inputs, 14px cards	the classic shadcn/ui look
`nova`	32px	10px inputs, 14px cards	vega, tighter
`maia`	36px	pill inputs, 16px cards	soft and rounded
`lyra`	32px	square	boxy and sharp
`mira`	28px	8px inputs, 10px cards	the densest, for busy pages
`luma`	36px	24px inputs, 32px cards	the roundest, airy
`sera`	40px	square, uppercase badges	large and roomy
`rhea`	32px	16px inputs, 24px cards	compact but rounded

Base colors #

The base sets every token: backgrounds, text, borders, muted surfaces. Each is tuned for light and dark mode. Shown: background, foreground, primary, muted and border.

Base	Light	Dark
`neutral` (default)
`stone`
`zinc`
`mauve`
`olive`
`mist`
`taupe`

Accent colors #

color adds an accent on top of the base: primary, secondary, the sidebar accent and five chart colors. The chart colors are the same in light and dark mode. Leave color out to keep the base’s own primary.

Color	Primary, light	Primary, dark	Charts	Code (light / dark)
`amber`				`gruvbox-light` / `gruvbox-dark`
`blue`				`vs` / `one-dark`
`cyan`				`solarized-light` / `solarized-dark`
`emerald`				`friendly` / `nord`
`fuchsia`				`lovelace` / `dracula`
`green`				`friendly` / `nord`
`indigo`				`vs` / `one-dark`
`lime`				`friendly` / `nord`
`orange`				`gruvbox-light` / `gruvbox-dark`
`pink`				`pastie` / `monokai`
`purple`				`lovelace` / `dracula`
`red`				`pastie` / `monokai`
`rose`				`pastie` / `monokai`
`sky`				`vs` / `one-dark`
`teal`				`solarized-light` / `solarized-dark`
`violet`				`lovelace` / `dracula`
`yellow`				`gruvbox-light` / `gruvbox-dark`

Code highlighting #

The accent also picks the Pygments styles for code blocks (last column above). Without an accent, code uses default and github-dark. Override either one:

dokk.toml

[theme]
color = "pink"
code_light = "friendly"   # any Pygments style
code_dark = "nord"

Fine-tuning #

To change single colors, override templates/files/theme.css.jinja in your site. It receives base, color and vars, with the final tokens in vars.light and vars.dark. See Templates and styling.

Colors are from shadcn/ui (MIT), as vendored in dokk.