Styles

A style owns the entire look of the preview: typography, colors, spacing, code, and callout styling. PeepMD ships with a collection of built-in styles, among them GitHub, the default this manual renders in, and you can add your own.

Switching

Click or tap the style name at the right of the status bar, or in the ornament at the bottom-right of the window on Vision Pro. On the Mac and iPad a menu lists every style; pick one and the preview restyles, scroll position intact. On iPhone there is no room for a menu, so the name opens Settings on the Theme pane instead. The choice persists across launches, and applies to every document you open.

Code themes

A style carries its own colors for code blocks. A code theme replaces them: the block's background and text, and the colors of keywords, strings, numbers, names and comments, on top of whichever style is active. Eight are built in. GitHub, One, Solarized, and Xcode follow light and dark mode. Reading, Nord, Monokai, and Dracula are dark blocks on any page.

Pick one under Code in Settings → Theme, the Theme pane of Settings on iPad, iPhone, and Vision Pro. Follow Style is the default: the style's own colors. The theme travels with the document into PDF and HTML exports and into email.

Adding your own

On the Mac, open Settings → Theme with ⌘,, the gear at the left of the status bar, or Manage Styles… in the status bar menu. Built-in and custom styles sit in two lists, one above the other:

• + (Import Style…) copies .css files into your styles folder, or drop files into the folder yourself (Open Styles Folder takes you there). Each file appears in the list under its filename.
• Remove trashes the custom style you have selected. Built-ins can't be removed, so the button is only enabled for the lower list.
• Click a row in either list to make that style active.

On iPad and iPhone, tap the gear in the floating status bar and choose Theme; on Vision Pro it is the gear in the ornament below the window. Built-in and custom styles are listed under their own headings; tap one to use it, Import Style… brings in a .css file from Files, and swiping a custom style deletes it.

Writing a style

A stylesheet is a complete replacement, not a patch. The rendered document is wrapped in:

<article class="markdown-body">
  …your document…
</article>

so target .markdown-body the way GitHub's stylesheet does. The practical starting point is a copy of a built-in, trimmed and reshaped to taste. On the Mac they are inside the app itself, at PeepMD.app/Contents/Resources/GitHub.css. A style sees the same HTML every document produces: headings carry anchor ids, callouts are .markdown-alert blocks, critic marks carry a .critic class, code blocks carry language-* classes.

Styles are per-device. Writing one is Mac work, and the finished .css can be sent over to an iPad and imported there.

Style changes made on disk apply on the next render: save the CSS, then ⌘R in the preview (pull down to refresh on iPad and iPhone).

Light and dark mode

The preview follows the appearance PeepMD is running in, which is the system's or whatever you have set in Settings → Appearance, and your stylesheet decides how to respond. There are two strategies:

Adapt. Define your light colors normally, then override them under a media query, and declare both schemes so WebKit's scrollbars and controls match:

:root { color-scheme: light dark; }

.markdown-body {
  color: #1f2328;
  background-color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .markdown-body {
    color: #d8d8d8;
    background-color: #1e1e1e;
  }
  /* ...and any links, code backgrounds, borders... */
}

Commit to one look. A style with a strong identity, such as cream paper or newsprint, can stay itself in dark mode, as long as it says so and paints its own ground:

:root { color-scheme: light; }
html { background-color: #ffffff; }

Without one of the two, a light-only style over a dark window renders dark text on a dark ground. The built-in GitHub.css is a complete worked example of the adaptive strategy, with its entire palette defined twice as CSS variables.

Using CSS variables for every color, the way GitHub.css does, keeps the dark override down to one small block instead of a second stylesheet.

---

Previous: Exporting and Sharing · Next: Settings