Themes

Change how Vesper looks in Settings → Appearance. The theme follows light and dark mode by itself. Your public page keeps Vesper's own look.

Built-in themes and accent

Theme	Looks like
Paper	Warm paper with a dotted grid (the default)
Plain	Paper without the grid or handwriting
Mist	Cool blue-grey
Matcha	Soft green
Ink	Black and white

Pick an accent colour to replace the theme's own for links, buttons and highlights. Dark mode uses a lighter mix of it so it stays readable. Choose Use the theme's colour to go back.

Custom CSS Pro

On Pro you can add your own CSS under Settings → Appearance → Custom CSS. It loads after everything Vesper ships, so it wins without !important.

What to target

Every part of the page has a data-vx attribute. These are the stable ones:

Selector	Part
[data-vx="header"], [data-vx="brand"]	The header and the workspace name and icon
[data-vx="timeline"], [data-vx="entry"]	The timeline and each entry
[data-vx="entry-body"]	An entry's text (rendered Markdown)
[data-vx="print"], [data-vx="prints"]	Photos on the timeline
[data-vx="tag-bar"], [data-vx="tag"]	Tags
[data-vx="rail"], [data-vx="heatmap"]	The side rail and the activity heatmap
[data-vx="gallery"], [data-vx="viewer"]	The photo wall and the full-size viewer
[data-vx="atlas"], [data-vx="map-pin"]	The atlas map and its photo markers
[data-vx="button"], [data-vx="input"]	Buttons and text fields

Other data-vx names and class names can change between versions; build on the ones above.

Variables

Prefer changing variables to rewriting rules. Use light-dark(light, dark) to give a value for each mode.

Variable	Sets
--color-background, --color-muted	Page and panel backgrounds
--color-foreground, --color-muted-foreground	Text
--color-border, --color-border-strong	Lines
--color-accent, --color-accent-foreground	Links, buttons, highlights
--color-note, --color-photo-frame, --color-paper-grid	Pinned notes, photo borders, the dotted grid
--font-sans, --font-serif, --font-mono, --font-hand	Typefaces
--radius-sm, --radius-md, --radius-lg, --shadow-paper	Corners and shadows

:root {
  --color-background: light-dark(#fffaf3, #17140f);
  --font-sans: "Iowan Old Style", serif;
}

[data-vx="entry-body"] {
  font-size: 1.0625rem;
  line-height: 1.8;
}

What is removed

When you save, Vesper removes:

• @import, @charset and @namespace.
• url() to anything but your own site (/…) or an inline data:image/…; web fonts and images from other sites do not load.
• behavior, -moz-binding and expression().

Anything over 64 KB is refused. A rule that contains something removed is dropped whole; the rest stays.