CSS

CSS tokens

Built-in HTML themes expose stable CSS custom properties in the --calepin-* namespace. Prefer overriding these tokens from local theme CSS rather than targeting private theme internals.

/* themes/my-theme/css/custom.css */
:root {
  --calepin-color-background: #f6f7f9;
  --calepin-color-text: #111827;
  --calepin-color-accent: #2563eb;
  --calepin-color-border: #d1d5db;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: var(--calepin-color-background);
  color: var(--calepin-color-text);
}

pre {
  border: 1px solid var(--calepin-color-border);
}

In Calepin HTML output, #title() is rendered as the page <h1>, so the first Typst heading = becomes <h2>, == as <h3>, and so on. If you target heading selectors in CSS, use this mapping unless your theme remaps heading markup.

Light and dark themes

To define distinct values for light and dark mode, use html[data-theme="light"] and html[data-theme="dark"] selectors in your local theme stylesheet:

html[data-theme="light"] {
  --calepin-color-background: #f6f7f9;
  --calepin-color-text: #111827;
  --calepin-color-accent: #2563eb;
}

html[data-theme="dark"] {
  --calepin-color-background: #101826;
  --calepin-color-text: #f8fafc;
  --calepin-color-accent: #60a5fa;
}

Calepin sets html[data-theme="light"] or html[data-theme="dark"] when the theme toggle is forced by user preference, explicit control, or URL/state storage. If no explicit mode is set, the browser preference is used for initial mode.

Style raw HTML

Use a local theme that extends typst when you want a simple, unstyled HTML base.

Create a directory with a manifest, a layout, and a stylesheet:

raw/
  theme.toml
  layouts/
    document.html
  css/
    raw.css

Edit the manifest raw/theme.toml:

extends = "typst"

Edit raw/layouts/document.html to wrap Typst’s generated HTML and inline the theme CSS files:

{{ doc.head }}
  <meta charset="UTF-8">
  <title>{{ doc.title }}</title>
  {% for file in css %}
  <style>
{{ file.content }}
  </style>
  {% endfor %}
{{ doc.body_open }}
  <main class="page">
    {{ doc.body }}
  </main>
{{ doc.body_close }}

The important pieces are doc.head, doc.body_open, doc.body, and doc.body_close, which preserve the HTML shell Typst produced. The css loop loads files from the theme’s css/ directory, including raw.css.

Compile the notebook:

calepin compile notebook.typ --format html --set theme=raw

List of tokens