Custom Themes

A theme sets the colors, fonts, and spacing of the editor. Start from one of the built-in themes and change whatever you like.

Make your own theme

1. Open Settings > Theme.
2. Pick the built-in theme closest to what you want and click Duplicate to Customize.
3. Change colors, fonts, and layout in the editor that opens.

Your copy is saved under My Themes.

Colors

For a dark theme, set --bg-color to a dark color — the rest of the interface follows it. For a light theme, set a light one.

Page and text:

What it sets	Variable
Editor background	--bg-color
Body text, code block text, bullet points	--text-color
Headings	--heading-color
Dimmed text: the smallest headings, list numbers, struck-through text	--text-secondary
Links, checked task boxes, selected table cells, table controls	--link-color
Text selection highlight	--selection-bg

Code:

What it sets	Variable
Code block background, and table header fill	--code-bg
Inline code background	--inline-code-bg
Inline code text	--code-text

Quotes, lines, and marks:

What it sets	Variable
Quote left border	--blockquote-border
Quote text	--blockquote-text
Borders, dividers, horizontal rules, unchecked task boxes	--border-color
The marks you type: heading #, ---, comment delimiters	--marker-color

Fonts

Put quotes around multi-word font names wherever they appear: "Fraunces", Georgia, serif.

To use a font you don’t have installed, name it in --google-fonts and Inkstone fetches it.

What it sets	Variable	Example
Heading font	--font-heading	"Fraunces", Georgia, serif
Body font	--font-body	Verdana, Geneva, sans-serif
Code font	--font-mono	"SF Mono", Menlo, monospace
Base text size	--font-size	16px
Line height	--line-height	1.6
Fonts to fetch from the web	--google-fonts	Fraunces,Crimson Pro

Layout

What it sets	Variable	Example
Maximum text width	--content-width	700px
Space between paragraphs	--paragraph-spacing	1em
How much the sidebar is darkened or lightened	--ui-sidebar-contrast	0 to 10

Code colors

What it sets	Variable
Comments	--syntax-comment
Brackets and semicolons	--syntax-punctuation
Numbers	--syntax-number
Strings	--syntax-string
Operators	--syntax-operator
Keywords	--syntax-keyword
Function names	--syntax-function

For text-editor users: theme files

Open ~/Library/Application Support/Inkstone/Themes/ and open any theme file in the editor you like. To see your edits, select that theme in Settings > Theme and click Reload.

Starting a brand-new file rather than editing an existing one? Give it an id no other theme uses, and relaunch Inkstone once — Reload won’t find a new file, but the next launch will.

{
  "builtIn": false,
  "id": "my-theme-1234567890",
  "name": "My Theme",
  "variables": {
    "--bg-color": "#f6f6ef",
    "--text-color": "#000000",
    "--heading-color": "#000000",
    "--link-color": "#ff6600",
    "--font-body": "Verdana, Geneva, sans-serif",
    "--font-size": "12px",
    "--line-height": "1.5"
  }
}

List only the values you want to change — anything you leave out keeps its default.