1. Docs
2. Customizing

Your own presets and schemes

A look of your own as a plugin, a CSS file and a small data file, in your site’s folders.

Presets and schemes are plugins: each is a CSS file and a data file. The theme’s sit in its assets/css/presets/, assets/css/schemes/ and data/fieldnotes/; yours go in the same folders of your site. A new name adds one; a theme preset’s name replaces it. Only the preset and scheme a page uses end up in its stylesheet.

A colour scheme#

Two files. The CSS sets the nine colours (what each does) for light mode, and again for dark mode:

/* Heather: pale lilac and plum; a dark moor */
:root[data-scheme="heather"] {
    --color-bg: #f6f2f7;
    --color-surface: #fdfbfd;
    --color-text: #2d2430;
    --color-primary: #4a2a55;
    --color-secondary: #66586b;
    --color-tertiary: #e5dce8;
    --color-accent: #9b2f6a;
    --color-border: #e6dee9;
    --pattern-color: #b39bbd;
}

:root[data-scheme="heather"][data-theme="dark"] {
    --color-bg: #1d1820;
    --color-surface: #251f29;
    --color-text: #e6dee9;
    --color-primary: #f1e9f4;
    --color-secondary: #b3a6b8;
    --color-tertiary: #362d3b;
    --color-accent: #f29ac8;
    --color-border: #342b38;
    --pattern-color: #6e5f74;
}

The data file gives it a name and a place in lists such as the demo’s playground:

name = "Heather"
weight = 200
description = "pale lilac and plum; a dark moor"

Use it with scheme = "heather" under [params.style]. Check every text colour’s contrast against bg, surface and tertiary (at least 4.5:1) before you publish.

A preset#

A preset sets how things are drawn: fonts, corners, shadows, cards, the background, and any rules for the page’s parts. The easiest start is a copy: the demo’s theme generator downloads the preset you’re looking at under a name of your own, as both files.

/* Notebook: a lined notebook, rounded cards, a handwritten heading font */
:root[data-preset="notebook"] {
    --font-body: "Literata", Georgia, serif;
    --font-heading: "Caveat", cursive;
    --heading-weight: 600;
    --radius-m: 1rem;
    --shadow: none;
    --card-border: 1px dashed var(--color-border);
}

/* Rules for parts of the page, only with this preset */
[data-preset="notebook"] .card-title {
    font-size: var(--step-3);
}

name = "Notebook"
weight = 200
description = "A lined notebook, rounded cards, a handwritten heading font."
scheme = "pencil"
fonts = ["Literata:ital,wght@0,400;0,700;1,400", "Caveat:wght@600"]

The custom properties a preset can set are in the theme’s assets/css/tokens.css and theme.css; assets/css/main.css explains the cascade layers that put a preset’s rules above the theme’s components. The theme’s presets in assets/css/presets/ are the best examples: minimal.css is short, fieldnotes.css shows tape and prints.

Trying it#

Give a single page the new look in its front matter, then switch the whole site once you like it:

style:
  preset: notebook