Share
Explore

Create a Custom Themes

How to Get Started


Open NotePlan, click on “Preferences”, choose a theme as template and click on “Copy & Customize”:

CleanShot 2021-03-03 at 20.15.53@2x.png

This will copy the theme JSON file into NotePlan’s synced folder structure from where you can modify it. Any changes you make on the theme will be automatically synced to all your other devices, including iOS.

You can also import other themes by clicking on “Import Theme...” in the same window.

JSON File

The theme file contains two major keys: “editor” and “styles”. The “editor” key defines the main colors of NotePlans user interface:

"editor": {
"backgroundColor": "#ffffff", // Base background color
"altBackgroundColor": "#FAFFFF", // Slighlty lighter
"tintColor": "#d87001",
"tintColor2": "#0091f8",
"textColor":"#333333",
"toolbarBackgroundColor": "#F2F3F5",
"toolbarIconColor": "#444444",
"menuItemColor": "#444444",
"shouldOverwriteFont": true
},

The “styles” key contains all text styles, like font, text size, color, etc. for the titles, open tasks, closed tasks, quotes, etc.:

"styles": {
"body": {
"font": "AvenirNext-Regular",
"size": 16,
"color": "#333333",
},
"title1": {
"color": "#000000",
"size": 28
},
"title2": {
"color": "#000000",
"size": 24
},
...

Style Attributes

Following attributes are valid for style keys with example values:

"lineSpacing": 3,
"paragraphSpacing: 8,
"paragraphSpacingBefore: 8,
"color": "#000000",
"backgroundColor": "#FFFFFF",
"size": 24,
"type": "italic",
"underlineStyle": 1,
"underlineColor": "#000000",
"strikethroughStyle": 1,
"strikethroughColor": "#000000"

Strikethrough and underline styles have a thicker line the higher the number you are using for the
...style
attribute. Adding a color is optional.

Colors

Colors support ARGB written as hexacode (
#AARRGGBB
). You can omit the A value and write:
#FF0000
to get red for example or
#66FF0000
to get transparent red.
color
or
foregroundColor
is the text color. You can also define
backgroundColor
to change the background behind text (as opposed to the whole editor background).

Link Colors

Fonts

The font of most keys, including the following is overwritten by the app preferences under “Editor”, so that you can change the font and font-size from within the app without having to modify a theme:

"body"
"title1"
"title2"
"title3"

You can turn off the overwriting and define your own font by setting following attribute under the “editor” key in a theme file:

"shouldOverwriteFont": false

It’s set to
true
by default.

Font Names

Custom Fonts on iOS

Bold and Italic

System Fonts

Spacing

If you want to change the
paragraphSpacing
,
lineSpacing
or
paragraphSpacingBefore
for the titles, you need to add the attributes to the corresponding
"title-markX"
keys instead of
”titleX”
keys.

By default the
paragraphSpacing
is different from the
lineSpacing
. In most apps these values are the same. If you want to have the same value for both, add them to the
”body”
key. Make sure to add it also to the
“tabbed”
key which styles anything that is indented.

HeadIndent

Tasks and Bullets

Tasks and bullets are styled by the
”todo”
key. There is no separation, because the preferences determine what a task is and what a bullet is. For example,
* task
is by default a task, but if you turn it off in the preferences, it becomes a bullet and
- task
can be a task or the standard markdown:
- [ ] task
.

Task States (Open, Scheduled and Canceled)

special-char

Titles

title1
covers headings with a single pound
# Heading
,
title2
with two pounds
## Heading 2
and
title3
covers anything else, from
### Heading 3
and more pounds. There is no support for
title4
or higher.

Building Custom Styles with Regular Expression

Every style is based on a regular expression to detect the text. The regular expressions are stored in a JSON file inside the app bundle, but you can add custom regular expressions to the theme JSON file.

Example 1 → ::highlighting::

Example 2 → !! flagging by importance

Example 3 → ~~Strikethrough~~

Example 4 → ~Underline~

Regular Expression Attributes

Create Links with Regular Expressions

Open Search with Regular Expressions

NotePlan’s Regular Expressions

Resolving Conflicts

Change Existing Styles

Example → #### Heading 4

Example → Different Colors for Done / Canceled / Scheduled

More Ideas

Editor

The theme files are written in JSON. If you miss one comma anywhere, it won’t load. The easiest way to reduce such time-wasting errors is to use an editor which supports JSON. For example “Sublime”. It will show you if you have missed anything:

image.png

Share your theme

Once you have created your own custom theme, please share it with other users/

→ Share themes
→ Ask questions

🔗 GitHub repo with themes:
→ Download themes
→ Submit themes to the repo with a pull request or reach out on Reddit

⬇️ Full example theme with strikethrough and custom style for ::highlighting::
ayu-mirage-tweaked.json
4.6 kB

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.