Theme showcase
Pick a style, base color and accent color, and this page restyles itself. Use the light/dark
toggle in the header to see both modes, then copy the [theme] table into your dokk.toml.
Palette #
The colors of the current theme, live:
| Token | Swatch | Token | Swatch |
|---|---|---|---|
background |
foreground |
||
primary |
primary-foreground |
||
secondary |
muted |
||
accent |
border |
||
destructive |
ring |
Charts:
Buttons and forms #
Style packs differ most here: height, corners, padding and weight.
Components #
A note with a link and inline code.
Tips, cautions and warnings use the same alert, in their own colors.
Careful with this one.
And this one breaks things.
pip install "dokk[serve,search]"
uv pip install "dokk[serve,search]"
Folders, front matter, links and images.
Everything on this page, documented.
- Pick a style, base and color above.
- Copy the
[theme]table. - Paste it into
dokk.tomland rundokk build.
A collapsible block
Hidden until opened. Press Ctrl+K to search, or /.
- dokk.toml
docs/
- index.mdthe home page
- guides/
- public/
Badges inline: New Beta Draft Removed
Text #
Body text with bold, italic, struck, a link and inline code. A
footnote, too.[1]
A quote, set apart from the text around it.
- A list item
- nested
| Setting | Default | What it does |
|---|---|---|
style |
vega |
shape and density |
base |
neutral |
every surface and text color |
color |
none | the accent on top |
def hello(name: str) -> str:
return f"Hello, {name}!"
About this page #
Code blocks keep these docs’ own highlighting; in your site it follows the accent color. See Themes for what each setting does.
A normal dokk site ships just the style pack named in its dokk.toml. These docs also publish
the other seven, so this picker can switch between them.
The picker is not built into dokk: it is a custom component of these
docs, a template in templates/components/themepicker.html.jinja.
Footnotes collect at the end of the page. ↩︎