CSS Custom Properties Reference

All design tokens are defined in doku/assets/css/main.css. Override any of these in a child theme to customize the appearance without modifying theme files.

Color tokens

Two rules worth keeping when you override a color

• --color-bg-secondary has to stay on the same side of --color-bg as the shipped value — darker than the page in light mode, lighter in dark. The panels painted with it cast a shadow, and a surface on the wrong side of the page reads as sunk into it while its shadow says it is floating.
• --color-text-dim is the stronger of the two secondary grays, and --color-text-muted the quieter. “Stronger” means further from the page: darker in light mode, lighter in dark. Keep them that way round, or a section label ends up reading as quieter than the rows beneath it.

Callout colors

UI elements

Note: Keyboard keys are styled on the bare kbd element, so overriding --color-kbd-bg and --color-kbd-border restyles both keys you insert with the Keyboard input format and any <kbd> brought in by the Markdown importer.

Typography

Type scale

Interface text runs on a six-step scale in pixels, so it stays put relative to the chrome around it. Article text runs on rem, so it follows the reader’s own base size.

Corner radii

Three tokens cover the whole theme, so you can square everything off or round it right up in one place:

/* Sharper, more technical chrome */
:root {
    --radius-sm: 0;
    --radius-md: 2px;
    --radius-lg: 3px;
}

Note: Unlike the color tokens, these do not need a [data-theme="dark"] counterpart — they are the same in both modes, so setting them once in :root is enough.

Panel shadows

These do need a [data-theme="dark"] counterpart, and they are the one place where dark mode needs more of something than light rather than less: a black shadow falling on a near-black page has very little room to show itself, so the dark values are both heavier and wider. If you override them, expect to set the dark ones several times stronger than looks reasonable on paper. Past a point the shadow stops helping and the panel’s border does the remaining work — raising the opacity further mostly reads as a smudge.

Widths and gutters

Like the radii, these are the same in both color schemes and need no [data-theme="dark"] counterpart.

Both side columns hold their position for the whole article rather than sliding away with the last screenful. They shorten instead as the full-width footer comes into view, so each one stops where the footer starts and neither is ever covered by it. Doku positions the columns against the window and works out the offset that keeps them aligned with your content from --width-content and --gutter-bar, in a token called --rail-gutter. It is derived — change the widths above and it follows; set it by hand and the columns land off their tracks.

This applies to both side columns on every page, widget columns included.

Motion

Two values, because the theme only makes two kinds of move. Lower them both for a snappier interface, raise them for a softer one, and everything stays in step.

Readers who have asked their system to reduce motion get none of it: the drawer, the collapsing sections, the chevrons and the search field’s focus animation all become instant, and jumping to a heading from the table of contents stops scrolling the page smoothly and simply arrives. Color and background fades are left alone — nothing about them moves.

Navigation row spacing

A navigation row takes its vertical space from padding alone — there is no fixed row height. A one-line row is 16px plus one line of text, a two-line row 16px plus two, so the gap between any two rows is the same 16px however either of them wraps. That is what lets a long page title wrap instead of being clipped, and keeps the list evenly spaced when it does.

The two tokens are independent: change --nav-row-leading and the padding stays where you set it. A lower leading draws the two lines of a wrapped title closer together, a higher one opens them up, and in both cases the space between neighboring rows is unchanged. 1.2 and 1.6 are both comfortable.

What to watch when you change either is the 32px minimum touch target, which rows are also held to. Keep

2 × --nav-row-pad  +  --nav-row-leading × text size  ≥  32px

and the padding alone decides the height. At the shipped 8px and 1.4 that holds for every row the theme draws except the deeper levels of the table of contents: the sidebar’s 13px and 12px rows come to 34.2px and 32.8px, and the first TOC level to 32.8px. Where it does not hold the minimum takes over and adds a fraction of a pixel to one-line rows that wrapped rows do not get — the second and third TOC levels, both at 11px, come to 31.4px and are held up to 32. It is not visible at that scale, but lowering the padding much further makes it so, and then wrapped and unwrapped rows really do sit at different distances from their neighbors.

Icons

Every icon in the interface comes from one set, Lucide, and each is held in an --icon-* token. They ship inside the stylesheet as inline SVG rather than as an icon font, so nothing is downloaded to draw them:

Icons are painted as masks rather than images, so each one takes the color of the text around it and follows the light/dark toggle automatically — you never restyle an icon to match a color change. To swap one, point its token at your own SVG as a data URI. Any color in that SVG is ignored; only its shape is used:

:root {
    /* A plus sign in place of the breadcrumb chevron. */
    --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
}

Like the radii and widths above, these are the same in both color schemes, so :root alone is enough. Font Awesome is separate: it is loaded only on pages whose content uses fa- icon classes, and it does not affect the interface icons here.

A tinted logo is drawn the same way — its shape comes from the SVG you uploaded and its color from --color-accent — so changing the accent, whether in the Customizer or in a child theme, retints the mark with no rule of its own. With a Dark mode logo set, the shape comes from whichever of the two matches the current theme. See Tint Logo With Accent Color.