Themes
A Design Token-driven theme system — switch themes and every element (headings, code blocks, charts, tables) updates in sync.
Switching Themes
- Click the current theme name in the editor top bar → select any theme from the dropdown → preview updates instantly
- Dark / Light mode: click the moon / sun icon in the top bar. Each theme has an independent dark variant.
Built-in Themes
| Theme | Style | Accent | Best For |
|---|---|---|---|
| Default | Modern & Clean | Blue | General Purpose |
| Tech Blog | Tech Blog | Purple + Dark code | Developers |
| Academic | Academic Paper | Teal + Serif | Researchers |
| Minimal | Minimal | Charcoal | Writers |
| Magazine | Magazine | Red + Display font | Content Creators |
| FT Pink | Financial Times Pink | Pink | Finance Writing |
| New Yorker | Literary Serif | Dark Gray | Humanities Bloggers |
| Kinfolk | Nordic Warm White | Warm Tones | Lifestyle |
| Catppuccin | Dark Developer | Mocha Palette | Developers |
| LaTeX Academic | Paper-style | Deep Blue | Researchers |
| Wired | Tech Media | Black | Tech Commentary |
| Sanlian | Chinese Humanities | Dark Brown | Chinese Writing |
Design Token System
Each theme is defined by a set of Design Tokens. Switching themes swaps the token mapping — all rendered elements respond automatically.
Primitive Layer
Raw values: color scales (gray.50–950, blue, red, etc.), fonts, sizes, border radii
Semantic Layer
References Primitives with purpose names: text-primary, bg-surface, accent, border-primary — defined for both light and dark modes
Component Layer
Bound to specific rendered elements: code-block.header-bg, mermaid.node-bg, table.header-bg — auto-derived from Semantic, overridable
Theme Studio
Edit tokens in real time, verify WCAG contrast, and export theme.json to craft your own theme.