NOTE: This theme works best on the "old" design of Joplin. It has not been integrated with the new design launched Fall 2020.

I recommend you use/start from this https://github.com/ajilderda/joplin-macos-native-theme instead

---

joplin theme

dark mode

a dark mode theme for Joplin.

Joplin is an open source note taking app. Learn more about Joplin.

It has been tested on Mac version Joplin Joplin 1.0.232 (prod, darwin)

Screenshots

1. Install Font

This theme assumes you have IBM Plex Sans and IBM Plex Mono installed on your computer.

Install those from https://github.com/IBM/plex or change the following lines in the :root section of userstyle.css and userchrome.css to your favorite font:

--font-sans: "IBM Plex Sans";
--font-mono: "IBM Plex Mono";

2. Install Theme

• Open the Joplin app
• Navigate to Joplin > Preferences > Appearances
• Click Advanced Settings
• Click Custom stylesheet for rendered Markdown and paste the content from userstyle.css
• Edit Custom stylesheet for Joplin-wide app styles and paste the content from userchrome.css

Apply Changes

The css changes won't apply until you close and reopen the app.

HINT: If you are using Dev Tools to mess with CSS Help > Toggle Developer tools, you can hit Command-R (Mac) to Force Reload the app to apply the CSS without having to quit.

3. Check to see how it looks.

You can paste css-sample.md into a new Joplin note to see it in action.

• Make sure to select the "Dark" Theme in Joplin > Preferences > Appearances
• Editor font size is set to 14

• HINT: I often have to force quit and restart the app after applying CSS changes and switching notes, not sure why.

4. Tweak the variables

Lots of this theme is defined in the :root section of userstyle.css and userchrome.css. You can update colors and sizing there. Make sure to update the variables in both files!

:root {
    --white: #e3e3e3;
    --dark-white: #EEF0EA;
    --light-grey: #A3A79F;
    --grey: #575856;
    --dark-grey: #272728;
    --darker-grey: #1D2024;
    --black: #131517;
    --base-size-1: 1px;
    --base-size-4: 4px;
    --base-size-8: 8px;
    --base-size-10: 10px;
    --base-size-13: 13px;
    --base-size-18: 18px;
    --base-size-24: 24px;
    --base-size-32: 32px;
    --base-size-40: 40px;
    --base-size-272: 272px;
    --z-toc: 99;
    --font-weight-light: 200;
    --font-weight-base: 400;
    --font-weight-bold: 500;
    --font-sans: "IBM Plex Sans";
    --font-mono: "IBM Plex Mono";
    --primary: #0097DB;
    --secondary: #005378;
    --font-line-height: 1.4em;
    --font-size: var(--base-size-13);
    --icon-size: var(--font-size);
}

I prefer navigating to ~/.config/joplin-desktop from my editor and editing the two files directly (vs opening them from the Joplin menu).

Delete Theme

• Open the Joplin app
• Navigate to Joplin > Preferences > Appearances
• Click Advanced Settings
• Click Custom stylesheet for rendered Markdown and delete all the CSS
• Edit Custom stylesheet for Joplin-wide app styles and delete all the CSS

Want to see more themes and talk about Joplin CSS?

Visit https://discourse.joplinapp.org/t/share-your-css/1730/56

Releases to this Theme

0.9

• support for CodeMirror editor
• spacing adjustment
• color adjustment
• updating version tested

0.8.1

• adjusting line height

0.8

• refactoring variables to include a font size and icon size
• updated table of contents style

0.7.1

• rearranged buttons to make more sense
• hyphenation support (apparently only works on mac)

0.7

• floating TOC, thanks to some great ideas here: https://discourse.joplinapp.org/t/toc-as-the-sidebar/5979/19

0.6.3

• moving tag list and fixing other minor spacing issues

0.6.2

• fixing icon color spacing

0.6.1

• Switching to custom font throughout

0.6

• Fixes for Joplin 1.0.207, major changes to layout with introduction of "code" button
• sidebar no longer has extra highlighting (this is a change to Joplin, not the CSS)

0.5.9

• minor changes to notbook list style
• updated the synchronize button / section
• merged pull request to fix summary / detail view

0.5.8

• bring back selected note in notebook color

0.5.7

• another pass on colors to make them more cohesive
• added opacity to notes list and sidebar to make the nested folder colors more subtle
• rearranging icons in the toolbar

0.5.6

• updating the folders to more clearly show hierarchy, based on comments https://discourse.joplinapp.org/t/cleaner-design-of-the-sidebar/7604
• fixes a typo found by u/xplosionmind

0.5.5

• made external link color brighter
• changed external link color variable to "secondary" to be more clear

0.5.4

• cleaning up docs

0.5.3

• fixed the resource icon size
• updated the css

0.5.2

• removed the hack that added an icon next to every link, looked bad for inline links, weird alignment issues. reduced the size of the Joplin J for internal links.
• fix the checkbox alignment issue seen in v1.0.194
• update h4 to match h3

v0.5.1

• cleaning up docs

v0.5

• Adding a release log
• Updating screenshots to show code formatting
• Updated external notes to have a box, so that they would horizontally align with the Joplin notes URLs