Themes

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 official themes 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.

Note that font and font sizes do not apply to mobile; only desktop/web.

: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;
}

In order to get SN to display a dock icon for your theme (a circle in the lower right corner of the app that allows you to quickly toggle themes), 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"
}

Reloading Mobile Themes#

The mobile app will download a theme once and cache it indefinitely. If you're installing your own mobile theme and make changes, you can press and hold on the theme name in the list to bring up the option to re-download the theme from the server.

Licensing#

Our themes are provided open-source mainly for educational and quality purposes. You're free to install them on your own servers, but please consider subscribing to Standard Notes Extended to help sustain future development of the Standard Notes ecosystem.