Theming

1. built-in color themes
2. built-in font themes
3. custom CSS

Start with Settings > Color Theme and Settings > Font Theme. Use Settings > Custom CSS only for the parts that still need to change.

All built-in themes include light and dark palettes. Your custom CSS is applied on top of the selected theme, so it is best to treat the built-in theme as a starting point rather than replacing everything from scratch.

Color Variables

Override these in Custom CSS to adjust colors. Most variables come in pairs: a background and its matching foreground (text) color.

Core palette

These are the main colors that control the overall look. Changing these affects the entire site.

Site-specific colors

These are derived from the core palette by default. Built-in themes set --site-accent separately; if you only override the core palette yourself, --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: Custom thread line color

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

Typography Variables

Font themes (Settings > Font Theme) override --font-heading, --font-body, and a small set of typography rhythm tokens for headings, labels, and body copy. --font-ui is intentionally not affected by font themes — it always stays sans-serif so buttons, navigation, and other interface elements remain legible regardless of the content font. You can further override any of these in Custom CSS.

Example: Lighter typography

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

Layout Variables

Example: Wider layout

:root {
  --site-width: 700px;
}

Surface Variables

Example: Card-style posts

: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

Target specific pages or elements using data attributes:

Example: Style only the home page

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

Example: Different styles per post 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 automatically follows the visitor's system preference (light/dark). Use a media query to set dark-mode-specific values:

: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);
  }
}

Tips

• Start with theme variables before writing deep selector overrides. Variables survive design changes better.
• Custom CSS has the highest priority and overrides everything, including the selected color theme.
• Use oklch() for colors. A good rule of thumb: keep --primary slightly sturdier for solid controls, and let --site-accent carry the softer editorial color.
• Test in both light and dark mode. If you override a color variable in :root, consider whether it also needs a matching override in @media (prefers-color-scheme: dark) or :root[data-theme-mode="dark"].