Theming

CSS Variables

Typeset uses CSS custom properties for theming. Override these in your own stylesheet:

:root {
  --color-bg: #fffff8;
  --color-surface: #f5f5f0;
  --color-text: #111111;
  --color-text-muted: #555555;
  --color-border: #dddddd;
  --color-accent: #b8860b;
  --color-link: #2563eb;
}

Dark Mode

The theme supports automatic dark mode based on system preferences. You can also toggle manually with the button in the header.

Dark mode colors are defined in the same variables:

:root[data-theme="dark"] {
  --color-bg: #1a1a1a;
  --color-surface: #252525;
  --color-text: #e4e4e4;
  --color-text-muted: #a0a0a0;
  --color-border: #404040;
  --color-accent: #d4a84b;
  --color-link: #60a5fa;
}

Typography Scale

Font sizes follow a 1.25 modular scale:

Spacing Scale

Consistent spacing using CSS variables: