Theming

Jant offers three ways to customize the look, from coarse to fine:

1. Built-in color themes
2. Built-in font themes
3. Custom CSS

Start with Settings > Color Theme and Settings > Font Theme. When those aren't enough, write overrides in Settings > Custom CSS.

All built-in themes include both light and dark palettes. Custom CSS layers on top of the selected theme — so the best approach is usually to treat a built-in theme as your starting point rather than rewriting everything from scratch.

Color variables

Color variables come in two layers:

• Core palette (--primary, --background, etc.) controls the overall feel; changing one affects the whole site.
• Site-specific colors (--site-*) derive from the core palette by default, letting you fine-tune local areas without disturbing the global palette — for example, recoloring links without touching button colors.

Most color variables come in pairs: a background color and its matching foreground (text) color.

Core palette

Site-specific colors

These derive from the core palette by default. Built-in themes set --site-accent independently; if you only override the core palette by hand, --site-accent falls back to --primary.

Example: custom primary and site accent

:root {
  --primary: oklch(0.48 0.08 255);
  --primary-foreground: oklch(0.98 0 0);
  --site-accent: oklch(0.56 0.06 240);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: oklch(0.79 0.06 255);
    --primary-foreground: oklch(0.19 0.01 255);
    --site-accent: oklch(0.74 0.07 240);
  }
}

Example: colored thread connectors

:root {
  --site-threadline: oklch(0.8 0.05 250);
}

Typography variables

When you pick a font theme in Settings > Font Theme, --font-heading, --font-body, and a few related font weights switch with it. --font-ui is intentionally left out — buttons, navigation, and other interface text always stay system sans-serif for legibility. You can still override any variable in Custom CSS for further tuning.

To use external font sources like Google Fonts, load the font files first via code injection, then point the variables at the new fonts in Custom CSS.

Example: lighter font weights

:root {
  --fw-medium: 400;
  --fw-semibold: 500;
}

Layout variables

Example: wider content area

:root {
  --content-max-width: 55rem;
}

Sidenotes and indented blocks

Footnotes use semantic source HTML: superscript noteref links in the body and native ordered endnotes after the authored content. On detail pages and public timeline lists, Jant uses each post's actual container—not only the viewport—to decide whether there is room for a Tufte-style right rail. A small progressive client enhancer positions the existing endnote list when a container is at least 56rem wide and the notes fit without excessive overflow. Every timeline item is measured independently. Narrow or dense containers, print, no-JavaScript clients, and older browsers keep bottom endnotes.

Because the enhancer reads each noteref's real position instead of anchoring a float to its containing block, padding on blockquotes or other prose blocks no longer needs a compensating anchor offset. Rail numbers share the note text's size and baseline. Customize its proportions and semantic colors through theme tokens:

:root {
  --layout-sidenote-width: 42%;
  --layout-sidenote-gap: 8%;
  --type-footnote-ref: calc(var(--type-body-size) * 0.75);
  --site-footnote-text: var(--site-reading-caption);
  --site-footnote-marker: var(--site-text-secondary);
}

The rail visually suppresses backlink arrows because each note is already next to its first reference. The backlink remains in the semantic HTML for bottom endnotes and assistive technology, and becomes visible if a keyboard user focuses it.

Theme selectors should prefer .footnote-endnotes, .footnote-list, .footnote, .footnote-ref, and .footnote-backlinks. Fragment IDs are opaque and may change between HTML contract versions; never style or parse their compact hash. The older .margin-toggle + .sidenote trio is retained only for legacy stored HTML.

Cards and media

Example: turn posts into cards

:root {
  --card-radius: 12px;
  --card-padding: 1.5rem;
  --card-border-width: 1px;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

Data attributes

You can target specific pages or elements with these data attributes when writing selectors:

Inside each post there are three more markers: data-post-body (body container), data-post-meta (date, tags, and other metadata), and data-post-media (image / video area). Together they let you style any one section of a post on its own.

Example: dividers only on the home page

[data-page="home"] [data-post] {
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.5rem;
}

Example: style by format

[data-format="quote"] [data-post-body] {
  font-family: var(--font-serif);
  font-style: italic;
}

[data-format="link"] {
  border-left: 3px solid var(--site-accent);
  padding-left: 1rem;
}

Example: highlight pinned posts

[data-post-pinned] {
  background: var(--muted);
  border-radius: 8px;
  padding: 1rem;
}

Dark mode

Jant follows the visitor's system preference (light / dark) automatically. To set values specifically for dark mode, use a media query:

:root {
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
}

A site can also be forced into dark mode (ignoring the system preference). To override colors in that case, use the :root[data-theme-mode="dark"] selector.

Tips

• Override variables first, write selectors second. Variables hold up better across future upgrades.
• Custom CSS has the highest priority and overrides every variable defined by the built-in theme.
• oklch() is convenient for color tuning. A common pattern: keep --primary saturated and stable for buttons; let --site-accent carry a softer tone for links and inline emphasis.
• Test in both light and dark. If you override a color variable in :root, think about whether it also needs a matching override under @media (prefers-color-scheme: dark) or :root[data-theme-mode="dark"].

What's next

• Code injection — embed third-party scripts, external fonts, analytics, comments
• Export and import — site migration and archiving