Download
  1. Docs
  2. Customise and extend

Themes and CSS

Change colours, fonts, density and layout in Settings, then go further with your own theme and CSS snippets.

On this page

Scaffold is designed to look the way you want without any add-ons.

Appearance settings

Setting Options
Theme Light, dark, or follow the system
Accent colour Any colour. Contrast is checked so links stay readable on every surface.
Font size and line height Editor text size and spacing
Editor width Readable column, wide, or full
Density Compact, comfortable or spacious
Sidebar style Flat or card
Code blocks Subtle, bordered or high contrast
Note font Sans, serif or monospace
Reduce motion Follow the system, or force on or off

On Android, controls become larger automatically (at least 44 px) and respect the screen’s safe areas.

Themes

A theme is a CSS file kept in the themes folder inside your vault’s .scaffold folder, or among the app’s own themes. Choose it in Settings. Because themes only restyle the interface, switching back is always one click, and removing the file leaves your notes untouched.

There is no theme store. You install a theme by copying its file into the folder, the same way you would any other file.

CSS snippets

Snippets are small .css files in the vault’s .scaffold/snippets folder. Custom CSS is off by default; you enable the feature first and then switch individual snippets on or off. Scaffold never loads CSS from the network.

Design tokens

The interface is built on named CSS variables, so a snippet that sets a few of them re-themes everything consistently:

:root {
  --lp-accent: #6aa6f8;
  --lp-editor-font-size: 17px;
  --lp-editor-line-height: 1.7;
  --lp-radius-lg: 14px;
}

Main groups of variables:

  • Surfaces: --lp-bg, --lp-bg-raised, --lp-bg-sunken, --lp-bg-hover, --lp-bg-active.
  • Lines and text: --lp-border, --lp-text, --lp-text-muted, --lp-text-faint.
  • Accent and meaning: --lp-accent, --lp-link, --lp-success, --lp-warning, --lp-danger.
  • Graph and canvas: --lp-graph-node, --lp-graph-edge, --lp-canvas-1 to --lp-canvas-6.
  • Type and shape: --lp-font-ui, --lp-font-mono, --lp-editor-width, --lp-radius-sm to --lp-radius-xl.

Dark and light themes are chosen with an attribute on the document, so a snippet can target one of them:

html[data-theme='dark'] {
  --lp-bg: #0d0d0f;
}

Fonts are bundled with the app and nothing is loaded remotely. If you want another font, install it on your device and name it in a snippet.

See Plugins when CSS is not enough.