Custom CSS

For a small change, you don't need a whole theme. Put CSS in user.css in your Themes folder (Settings ▸ View ▸ Open Folder). It applies on top of every theme, and Typora reloads it when you switch back to the app.

For anything larger, write a theme. Layout values such as sizes and spacing are best set in theme.toml.

Typora 2 has a new editor, so CSS written for Typora 1 needs changes. #write still exists, but headings, code and lists have new classes.

Fonts and size

:root {
  --ty-body-font: "Georgia", serif;
  --ty-heading-font: "Avenir Next", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

Settings ▸ View ▸ Font sets the size. CSS can't load fonts from the internet. To bundle one, add it to a theme.

Width of the writing area

:root { --ty-content-width: 900px; }

The default is 740px.

Line and paragraph spacing

:root {
  --ty-line-height: 1.8;
  --ty-paragraph-spacing: 1.2em;
}

Background

:root { --color-bg: #fbf8f1; }

--ty-bg-image sets an image, as a data: URL or a file in the folder.

Text

.md-h1 { text-transform: uppercase; }
.md-h4 { font-variant: small-caps; }
.md-p  { text-align: justify; }

Style .md-h2, not h2: a block's class is stable while it changes type. Other blocks are .md-p, .md-blockquote, .md-list-ul, .md-list-ol, .md-list-item, .md-fences, .md-table, .md-hr, .md-image, .md-math-block, .md-alert and .md-toc.

Avoid selectors such as h2 + p, :nth-child() and CSS counters over headings. Long documents keep only the visible blocks on the page, so they won't work. For numbered headings, use Auto Numbering.

List markers

List markers are drawn with ::after:

.ty-document .md-list-ol .md-list-ol > .md-list-item::after {
  content: counter(list-item, lower-alpha) ".";
}

Focus Mode

Focused blocks carry .md-focus, and the editor has .ty-focus-mode:

.ty-focus-mode .md-focus { background: #fff8e1; }

Code blocks

Code colours aren't CSS classes any more, so .cm-keyword-style rules have no effect on code blocks. Set [syntax] in a theme to any Shiki theme instead. In Source Code Mode, use .ty-source-cm.

Page breaks in print

@media print {
  .md-h1 { break-before: page; }
}

The / menu's Page Break forces one in a single place.

Export

Exported HTML wraps the document in .typora-export, so rules on #write may not reach it. .md-* classes and variables are the safest choice. CSS applies to HTML and PDF, but not Word.

Debugging

View ▸ Toggle DevTools (Shift+F12) opens the inspector: the WebKit Inspector on macOS, and DevTools on Windows and Linux. Inspect an element to find its classes. Theme warnings appear in the console.