Building a theme plugin

Themes allow you to customize the look and feel of the Standard Notes app on all platforms.

You can view the source code of our Dracula theme plugin in order to best understand how to create your own theme.

For how to install a theme, please see Publishing.

Creating a theme

Themes are simple CSS files which override a few variables to style the look of the application. CSS themes will automatically work on mobile. Your CSS file should contain content similar to the below.

View official client implementation →

:root {
  --sn-stylekit-base-font-size: 14px;

  --sn-stylekit-font-size-p: 1rem;
  --sn-stylekit-font-size-editor: 1.21rem;

  --sn-stylekit-font-size-h6: 0.8rem;
  --sn-stylekit-font-size-h5: 0.9rem;
  --sn-stylekit-font-size-h4: 1rem;
  --sn-stylekit-font-size-h3: 1.1rem;
  --sn-stylekit-font-size-h2: 1.2rem;
  --sn-stylekit-font-size-h1: 1.3rem;

  --sn-stylekit-neutral-color: #989898;
  --sn-stylekit-neutral-contrast-color: white;

  --sn-stylekit-info-color: #086dd6;
  --sn-stylekit-info-contrast-color: white;

  --sn-stylekit-success-color: #2b9612;
  --sn-stylekit-success-contrast-color: white;

  --sn-stylekit-warning-color: #f6a200;
  --sn-stylekit-warning-contrast-color: white;

  --sn-stylekit-danger-color: #f80324;
  --sn-stylekit-danger-contrast-color: white;

  --sn-stylekit-shadow-color: #c8c8c8;
  --sn-stylekit-background-color: white;
  --sn-stylekit-border-color: #e3e3e3;
  --sn-stylekit-foreground-color: black;

  --sn-stylekit-contrast-background-color: #f6f6f6;
  --sn-stylekit-contrast-foreground-color: #2e2e2e;
  --sn-stylekit-contrast-border-color: #e3e3e3;

  --sn-stylekit-secondary-background-color: #f6f6f6;
  --sn-stylekit-secondary-foreground-color: #2e2e2e;
  --sn-stylekit-secondary-border-color: #e3e3e3;

  --sn-stylekit-secondary-contrast-background-color: #e3e3e3;
  --sn-stylekit-secondary-contrast-foreground-color: #2e2e2e;
  --sn-styleki--secondary-contrast-border-color: #a2a2a2;

  --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color);
  --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color);

  --sn-stylekit-paragraph-text-color: #454545;

  --sn-stylekit-input-placeholder-color: rgb(168, 168, 168);
  --sn-stylekit-input-border-color: #e3e3e3;

  --sn-stylekit-scrollbar-thumb-color: #dfdfdf;
  --sn-stylekit-scrollbar-track-border-color: #e7e7e7;

  --sn-stylekit-general-border-radius: 2px;

  --sn-stylekit-monospace-font: 'Ubuntu Mono', courier, monospace;
  --sn-stylekit-sans-serif-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

  --sn-stylekit-grey-1: #72767e;
  --sn-stylekit-grey-2: #bbbec4;
  --sn-stylekit-grey-3: #dfe1e4;
  --sn-stylekit-grey-4: #eeeff1;
  --sn-stylekit-grey-4-opacity-variant: #bbbec43d;
  --sn-stylekit-grey-5: #f4f5f7;
  --sn-stylekit-grey-6: #e5e5e5;

  --sn-stylekit-accessory-tint-color-1: #086dd6;
  --sn-stylekit-accessory-tint-color-2: #ea6595;
  --sn-stylekit-accessory-tint-color-3: #ebad00;
  --sn-stylekit-accessory-tint-color-4: #7049cf;
  --sn-stylekit-accessory-tint-color-5: #1aa772;
  --sn-stylekit-accessory-tint-color-6: #f28c52;
}

Optional Overrides

View official client implementation →

--modal-background-color: var(--sn-stylekit-background-color);

--editor-header-bar-background-color: var(--sn-stylekit-background-color);
--editor-background-color: var(--sn-stylekit-editor-background-color);
--editor-foreground-color: var(--sn-stylekit-editor-foreground-color);
--editor-title-bar-border-bottom-color: var(--sn-stylekit-border-color);
--editor-title-input-color: var(--sn-stylekit-editor-foreground-color);
--editor-pane-background-color: var(--sn-stylekit-background-color);
--editor-pane-editor-background-color: var(--sn-stylekit-editor-background-color);
--editor-pane-editor-foreground-color: var(--sn-stylekit-editor-foreground-color);
--editor-pane-component-stack-item-background-color: var(--sn-stylekit-background-color);

--text-selection-color: var(--sn-stylekit-info-contrast-color);
--text-selection-background-color: var(--sn-stylekit-info-color);

--note-preview-progress-color: var(--sn-stylekit-info-color);
--note-preview-progress-background-color: var(--sn-stylekit-passive-color-4-opacity-variant);

--note-preview-selected-progress-color: var(--sn-stylekit-secondary-background-color);
--note-preview-selected-progress-background-color: var(--sn-stylekit-passive-color-4-opacity-variant);

--items-column-background-color: var(--sn-stylekit-background-color);
--items-column-items-background-color: var(--sn-stylekit-background-color);
--items-column-border-left-color: var(--sn-stylekit-border-color);
--items-column-border-right-color: var(--sn-stylekit-border-color);
--items-column-search-background-color: var(--sn-stylekit-contrast-background-color);
--item-cell-selected-background-color: var(--sn-stylekit-contrast-background-color);
--item-cell-selected-border-left-color: var(--sn-stylekit-info-color);

--navigation-column-background-color: var(--sn-stylekit-secondary-background-color);
--navigation-section-title-color: var(--sn-stylekit-secondary-foreground-color);
--navigation-item-text-color: var(--sn-stylekit-secondary-foreground-color);
--navigation-item-count-color: var(--sn-stylekit-neutral-color);
--navigation-item-selected-background-color: rgb(253, 253, 253);

--preferences-navigation-icon-color: var(--sn-stylekit-neutral-color);
--preferences-navigation-selected-background-color: var(--sn-stylekit-info-backdrop-color);

--dropdown-menu-radio-button-inactive-color: var(--sn-stylekit-passive-color-1);

--panel-resizer-background-color: var(--sn-stylekit-secondary-contrast-background-color);
--link-element-color: var(--sn-stylekit-info-color);

In order to get the Standard Notes client to display a circle next to your theme name, add the following payload into the your ext.json file when publishing your theme:

"dock_icon": {
   "type": "circle",
   "background_color": "#086DD6",
   "foreground_color": "#ffffff",
   "border_color": "#086DD6"
}