Theming

Design tokens, the light/dark/system switch, and how to restyle Tartarus.

On this page

Tokens

The design system is a short list of custom properties defined twice — once for light, once for .dark. Tailwind utilities read them through @theme inline, so overriding a token restyles every component at once.

css

:root {
  --bg: #ffffff;         /* page background        */
  --bg-soft: #fcfcfd;    /* code blocks, cards     */
  --surface: #f6f6f8;    /* inline code, hovers    */
  --line: #e7e7ea;       /* hairline borders       */
  --line-strong: #d8d8de;
  --ink: #16161c;        /* body text              */
  --ink-muted: #5a5a66;  /* prose                  */
  --ink-subtle: #8a8a96; /* labels, metadata       */
  --accent: #6a4cff;
}

Utilities follow the same names: bg-bg, bg-surface, border-line, text-ink, text-ink-muted, text-accent.

Switching themes

The switcher stores light, dark or system in localStorage. A tiny inline script in <head> applies the resulting class before the first paint, so there is no flash. Alpine only owns the dropdown and the change handler — it is never on the critical path.

Choose the default for first-time visitors:

toml

[params]
  defaultTheme = "system"   # "light" | "dark" | "system"

Overriding styles

Because this is a Hugo theme, any file can be shadowed by placing a file with the same path in your own project. To add styles without forking the design system, create assets/css/custom.css and import it after the framework:

css

@import "tailwindcss";
@import "./chroma.css";
@import "./custom.css";

For fonts, analytics or extra meta tags, override the empty layouts/partials/head-extra.html, which is rendered at the end of <head>.

Tip

Syntax colours are generated, not hand-written. Run sh scripts/gen-chroma.sh nord nord to swap both Chroma themes, or pass a different pair of Chroma styles .

Edit this page