Site themes

Custom CSS loads after the theme, so your rules win without !important. Write it in Site → Appearance → Custom CSS, or push a file from the CLI.

:root {
  --site-accent: #0f766e;
  --site-radius-lg: 6px;
  --site-control-radius: 6px;
}

[data-part="hero-title"] {
  font-family: "Fraunces", serif;
  letter-spacing: -0.02em;
}

median site css pull theme.css
median site css push theme.css

Cascade

@layer reset, base, theme, brand;

Light and dark

<html data-theme="paper" data-scheme="dark">

Put dark values under [data-scheme="dark"]:

:root[data-scheme="dark"] {
  --site-bg: #05070a;
}

Navigation

data-navigation on <html> is top or sidebar, from Site → Appearance. Sidebar lists each topic's articles under it and is what a site gets until it picks. Sidebar, topics only (topics in the API and CLI) is also sidebar.

:root[data-navigation="sidebar"] {
  --site-sidebar-width: 240px;
}

Tokens

Parts

Target elements with [data-part="<name>"]. States use data-state, data-active, aria-current and aria-pressed. Parts a team colors carry data-tone, which sets --tone.

article-sidebar is hidden. Show it with custom CSS for a list of the collection's articles beside each article.

Themes

The Console theme is retired. Sites that used it show Paper, and the API refuses "theme": "console".

Limits