Theme Builder

Start from

Background

Text

Borders

Accent color

The hover, pressed, soft and text shades are filled in for you — fine-tune if you like.

Fine-tune

Status colors

Fine-tune

Code highlighting

Color labels

Text highlights

A theme, previewed

Edited just now · 2 min read

Every color you pick shows up here instantly, in the theme's own tokens — so what you see is what your notes will look like.

Highlight passages, tasks, links, ideas, and questions.

// syntax preview
@component
export function Note(props: Props) {
  const count = 42;
  props.title = "Ideas";
  return <div>???</div>;
}