Plugin: Editor Themes

Plugins
1
logo128.png128×128 2.22 KB
Editor Themes
40+ editor themes, including VSCode, GitHub, and Sublime

preview.png1496×693 76.2 KB

This is a very simple plugin that applies all the themes from react-codemirror to the editor.

Expand full list of themes

Themes

Abcdef

abcdef

Abyss

abyss

Android Studio

androidstudio

Andromeda

andromeda

Atom One

atomone

Aura

aura

Basic Dark

basicDark

Basic Light

basicLight

BBEdit

bbedit

Bespin

bespin

Console Dark

consoleDark

Console Light

consoleLight

Copilot

copilot

Darcula

darcula

Dracula

dracula

Duotone Dark

duotoneDark

Duotone Light

duotoneLight

Eclipse

eclipse

GitHub Dark

githubDark

GitHub Light

githubLight

Gruvbox Dark

gruvboxDark

Gruvbox Light

gruvboxLight

Kimbie

kimbie

Material Dark

materialDark

Material Light

materialLight

Monokai

monokai

Monokai Dimmed

monokaiDimmed

Noctis Lilac

noctisLilac

Nord

nord

Okaidia

okaidia

Quiet Light

quietlight

Red

red

Solarized Dark

solarizedDark

Solarized Light

solarizedLight

Sublime

sublime

Tokyo Night

tokyoNight

Tokyo Night Day

tokyoNightDay

Tokyo Night Storm

tokyoNightStorm

Tomorrow Night Blue

tomorrowNightBlue

VSCode Dark

vscodeDark

VSCode Light

vscodeLight

White Dark

whiteDark

White Light

whiteLight

Xcode Dark

xcodeDark

Xcode Light

xcodeLight

Preview

You can switch themes at any time from the Editor Themes settings page.

All credit to uiwjs and the react-codemirror project.

They also have a really nice site with previews and even a theme editor.
If you'd like to contribute a new theme, please submit it to the react-codemirror project!

More information on github

12 Likes
2

Awesome! Thanks so much for this.

3

This is amazing, thanks so much, and thanks for taking the time to post all the themes as images! :pray:

4

Released v1.0.4

1 Like
5

Is there a trick to having this plugin control the editor background color? When I select a theme, it changes the theming for text/markup/syntax/etc. and for the line numbers in the gutter, but the background color is not changed. It seems as if the editor background color is being controlled by Joplin Settings → General → Appearance → Theme.

6

I tried this plugin, but I couldn't get it to work and I have no idea why.
Could it be conflicting with another plugin?

7

1.1.0 - 2026-03-09

Added

  • Add option to increase theme CSS specificity
1 Like
8

Sorry, I was working on a table plugin so didn't have time to look into this until now.

Just released v1.1.0 which should fix this. I added an option to increase precedence of themes and enabled it by default.

9

Just released v1.1.0 which increases precedence of the theme over other ones. Can you give that a try? It's definitely possible that another plugin could be conflicting.

1 Like
10

No worries - thanks for attempting to address this. After updating, the MD background editor color still seems unaffected by switching themes. Confirmed that the toggle is set to high, tried toggling it back and forth, etc.

11

Hmm I'd need more info on your setup:

  • What combination of themes are you using?

  • What plugins are you using?

    • You can copy the info from the About Joplin menu

  • Also do you have any custom stylesheet?

    • This is set in Settings under General->Appearance->[Click] Show Advanced Settings->[Click] Custom stylesheet for Joplin-wide app styles
12

@ckant I found the culprit - it was conflicting with the macOS theme plugin. Disabling that plugin allows yours to fully theme the MD editor.

13

Thanks for the feedback!
I think i found the culprit.
It seems the issue happened because I unknowingly enabled in Options –» General: “Use the legacy Markdown editor”.
Once I disabled it, everything started working.