Custom Themes

Inkstone themes are JSON files stored in ~/Library/Application Support/Inkstone/Themes/. Each file defines CSS variables that override the editor’s default styles.

Creating a Theme

Via the UI

1. Open Settings > Themes
2. Select any built-in theme and click Duplicate to Customize
3. Edit colors, fonts, and layout in the theme editor

Via JSON

Drop a .json file in the themes directory. The theme appears under My Themes in Settings after relaunch (or use the reload button).

{
  "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"
  }
}

The id must be unique. Convention: name-timestamp (e.g. hacker-news-1741305600).

Variable Reference

Colors

Variable	Description
--bg-color	Editor background
--text-color	Body text
--text-secondary	Secondary/metadata text
--heading-color	Headings
--link-color	Links
--code-bg	Code block background
--inline-code-bg	Inline code background
--code-text	Code text color
--border-color	Borders and dividers
--blockquote-border	Blockquote left border
--blockquote-text	Blockquote text
--selection-bg	Text selection highlight
--marker-color	List markers, HR

Typography

Variable	Description	Example
--font-heading	Heading font stack	"Fraunces", Georgia, serif
--font-body	Body font stack	Verdana, Geneva, sans-serif
--font-mono	Monospace font stack	"SF Mono", Menlo, monospace
--font-size	Base font size	16px, 14px
--line-height	Line height	1.6
--text-rendering	CSS text-rendering	optimizeLegibility
--font-smoothing	Webkit font smoothing	antialiased, auto
--google-fonts	Google Fonts to load (comma-separated)	Fraunces,Crimson Pro

Layout

Variable	Description	Example
--content-width	Max editor width	700px
--paragraph-spacing	Space between paragraphs	1em

Syntax Highlighting

Variable	Description
--syntax-comment	Code comments
--syntax-punctuation	Brackets, semicolons
--syntax-number	Numeric literals
--syntax-string	String literals
--syntax-operator	Operators
--syntax-keyword	Keywords
--syntax-function	Function names

UI

Variable	Description
--ui-sidebar-contrast	Sidebar darkening/lightening amount (0-10)

Tips

• Only include variables you want to override — omitted variables fall back to defaults.
• The app auto-detects light/dark mode from --bg-color luminance.
• Google Fonts are loaded dynamically when --google-fonts is set. Wrap font names in quotes in the font stack: "Fraunces", Georgia, serif.
• Edit theme JSON externally and hit reload in Settings to preview changes without restarting.