Themes

Sigla has three built-in document themes and supports custom CSS themes you drop into a config directory. Dark mode is an orthogonal toggle that flips the appearance of whichever theme is active.

Built-in themes

Three first-party themes ship inside the app:

Theme	What it looks like	Default header / footer in PDF
GitHub	The familiar README look — Helvetica/system sans, generous line height, blue links, light gray code blocks.	No header, no footer
Technical Paper	Serif body type, tighter measure, structured headings — feels like a journal article.	Header on, footer on
Apple Documentation	Apple’s developer-docs typography — SF Pro Display headings, narrow content column, restrained color.	No header, footer on

Pick one from View → Theme in the menu bar, or from Settings (⌘,) → Themes. The active theme is remembered across launches.

Each theme also picks the syntax-highlighting palette used for fenced code blocks:

Document theme	Light syntax theme	Dark syntax theme
GitHub	github	github-dark
Apple Documentation	xcode	tokyo-night-dark
Technical Paper	atom-one-light	atom-one-dark

Dark variants activate automatically via prefers-color-scheme.

Dark mode

View → Dark Document (⌘⇧D) flips the document into a dark variant of the active theme. It’s a per-document toggle independent of the system appearance — the rest of the UI (sidebar, settings, toolbar) follows the macOS appearance as usual.

The state persists in UserDefaults under DocumentDarkMode.

Custom CSS themes

Drop a .css file into ~/.config/sigla/themes/ and it shows up in the View → Theme menu under a separator (between built-ins and user themes). The filename without its extension becomes the display name — manuscript.css appears as “manuscript”.

[!NOTE] Sigla respects $XDG_CONFIG_HOME if set. If you’ve moved your XDG config root, themes live at $XDG_CONFIG_HOME/sigla/themes/.

Reveal in Finder

Settings (⌘,) → Themes shows a “Reveal Custom Themes in Finder” button that opens ~/.config/sigla/themes/ directly. The directory is created on demand if it doesn’t exist.

Reload

⌘⇧R (View → Reload Extensions) re-scans the themes directory along with the extensions directory. New themes appear in the View → Theme menu without an app restart.

How custom themes are served

Sigla serves custom themes via a private URL scheme (sigla-user-config://themes/<filename>.css) handled by an in-process scheme handler. This sidesteps WebKit’s file:// cross-origin restrictions and gives Sigla a place to enforce path-traversal protection.

You don’t need to know any of this to author a theme — just write CSS.

What to put in your CSS

Sigla renders the Markdown body and wraps it in a small scaffold. The full CSS surface is large; the most useful selectors are:

body — base typography (font family, size, line height, color, background)
h1–h6 — headings
p, ul, ol, li — body prose
blockquote — block quotes and GFM-style admonitions (> [!NOTE], > [!WARNING], etc.)
code, pre code — inline and fenced code (highlight.js classes layered on top)
table, th, td, tr — GFM tables
img, figure, figcaption
a — links
hr

If you want a head start, copy one of the built-in themes from inside the app bundle:

cp "/Applications/Sigla.app/Contents/Resources/themes/github.css" \
   ~/.config/sigla/themes/my-theme.css

Then edit, save, and ⌘⇧R in Sigla to see changes.

Sandboxed (Mac App Store) builds

If you’re running a Mac App Store version of Sigla, custom themes live in the sandbox container at ~/Library/Containers/com.slantedt.sigla/Data/Library/Application Support/Sigla/themes/ instead. App Sandbox blocks reads outside the container. Use the “Reveal Custom Themes in Finder” button — the path resolves correctly automatically.

The brew distribution is not sandboxed and uses ~/.config/sigla/ as documented above.

Cross-references

Settings — Renderers — the toggle-by-toggle settings tour
Extensions — authoring — for the asset gating mechanism if your theme needs to layer onto extension output