joplin-plugin-editor-themes/README.md

Joplin plugin that applies editor themes

<h1 align="center">
  <img alt="logo" src="https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/logo.svg" width="100">
  <br>
  Editor Themes
  <br>
</h1>

<h4 align="center"><a href="https://joplinapp.org">Joplin plugin</a> that applies 70+ editor themes</h4>

<p align="center">
  <a href="https://discourse.joplinapp.org/t/plugin-editor-themes">
    <img alt="Joplin Plugin" src="https://img.shields.io/npm/v/joplin-plugin-editor-themes?logo=joplin&label=plugin&color=1071D3&style=flat-square" />
  </a>
  <a href="https://discourse.joplinapp.org/t/plugin-editor-themes">
    <img alt="Joplin Plugin" src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fckant%2Fjoplin-plugin-stats%2Frefs%2Fheads%2Fmain%2Fdownloads.json&query=%24%5Bcom.ckant.joplin-plugin-editor-themes%5D&style=flat-square&label=downloads&color=0D98ba" />
  </a>
  <a href="https://github.com/ckant/joplin-plugin-editor-themes/blob/main/LICENSE">
    <img alt="MIT License" src="https://img.shields.io/badge/license-MIT-549E6A?style=flat-square" />
  </a>
  <a href="https://app.codecov.io/github/ckant/joplin-plugin-editor-themes">
    <img alt="Coverage" src="https://img.shields.io/codecov/c/github/ckant/joplin-plugin-editor-themes?logo=codecov&style=flat-square" />
  </a>
</p>

<p align="center">
  <a href="#features">Features</a> •
  <a href="#themes">Themes</a> •
  <a href="#screenshots">Screenshots</a> •
  <a href="#download">Download</a> •
  <a href="#settings">Settings</a> •
  <a href="#credits">Credits</a> •
  <a href="#license">License</a>
</p>

<div align="center"><img src="https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/preview.png" alt="preview" width="95%"></div>

## Features

- Applies 70+ editor themes from [react-codemirror](https://github.com/uiwjs/react-codemirror), [@fsegurai/codemirror-themes](https://github.com/fsegurai/codemirror-themes), and [@codemirror/theme-one-dark](https://github.com/codemirror/theme-one-dark), including VSCode, GitHub, Sublime, and One Dark

## Themes

<details>
<summary>Expand full list of themes</summary>

### [Abcdef](https://uiwjs.github.io/react-codemirror/#/theme/data/abcdef)

![abcdef](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/abcdef.png)

### [Abcdef Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Abyss](https://uiwjs.github.io/react-codemirror/#/theme/data/abyss)

![abyss](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/abyss.png)

### [Abyss Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Android Studio](https://uiwjs.github.io/react-codemirror/#/theme/data/androidstudio)

![androidstudio](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/androidstudio.png)

### [Android Studio Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Andromeda](https://uiwjs.github.io/react-codemirror/#/theme/data/andromeda)

![andromeda](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/andromeda.png)

### [Andromeda Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Atom One](https://uiwjs.github.io/react-codemirror/#/theme/data/atomone)

![atomone](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/atomone.png)

### [Aura](https://uiwjs.github.io/react-codemirror/#/theme/data/aura)

![aura](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/aura.png)

### [Basic Dark](https://uiwjs.github.io/react-codemirror/#/theme/data/basic/dark)

![basicDark](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/basicDark.png)

### [Basic Dark Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Basic Light](https://uiwjs.github.io/react-codemirror/#/theme/data/basic/light)

![basicLight](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/basicLight.png)

### [Basic Light Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [BBEdit](https://uiwjs.github.io/react-codemirror/#/theme/data/bbedit)

![bbedit](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/bbedit.png)

### [Bespin](https://uiwjs.github.io/react-codemirror/#/theme/data/bespin)

![bespin](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/bespin.png)

### [Catppuccin Mocha](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Cobalt 2](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Console Dark](https://uiwjs.github.io/react-codemirror/#/theme/data/console/dark)

![consoleDark](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/consoleDark.png)

### [Console Light](https://uiwjs.github.io/react-codemirror/#/theme/data/console/light)

![consoleLight](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/consoleLight.png)

### [Copilot](https://uiwjs.github.io/react-codemirror/#/theme/data/copilot)

![copilot](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/copilot.png)

### [Darcula](https://uiwjs.github.io/react-codemirror/#/theme/data/darcula)

![darcula](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/darcula.png)

### [Dracula](https://uiwjs.github.io/react-codemirror/#/theme/data/dracula)

![dracula](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/dracula.png)

### [Duotone Dark](https://uiwjs.github.io/react-codemirror/#/theme/data/duotone/dark)

![duotoneDark](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/duotoneDark.png)

### [Duotone Light](https://uiwjs.github.io/react-codemirror/#/theme/data/duotone/light)

![duotoneLight](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/duotoneLight.png)

### [Eclipse](https://uiwjs.github.io/react-codemirror/#/theme/data/eclipse)

![eclipse](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/eclipse.png)

### [Forest](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [GitHub Dark](https://uiwjs.github.io/react-codemirror/#/theme/data/github/dark)

![githubDark](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/githubDark.png)

### [GitHub Dark Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [GitHub Light](https://uiwjs.github.io/react-codemirror/#/theme/data/github/light)

![githubLight](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/githubLight.png)

### [GitHub Light Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Gruvbox Dark](https://uiwjs.github.io/react-codemirror/#/theme/data/gruvbox/dark)

![gruvboxDark](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/gruvboxDark.png)

### [GruvBox Dark Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Gruvbox Light](https://uiwjs.github.io/react-codemirror/#/theme/data/gruvbox/light)

![gruvboxLight](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/gruvboxLight.png)

### [Gruvbox Light Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [High Contrast Dark](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [High Contrast Light](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Kimbie](https://uiwjs.github.io/react-codemirror/#/theme/data/kimbie)

![kimbie](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/kimbie.png)

### [Material Dark](https://uiwjs.github.io/react-codemirror/#/theme/data/material/dark)

![materialDark](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/materialDark.png)

### [Material Dark Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Material Light](https://uiwjs.github.io/react-codemirror/#/theme/data/material/light)

![materialLight](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/materialLight.png)

### [Material Light Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Monokai](https://uiwjs.github.io/react-codemirror/#/theme/data/monokai)

![monokai](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/monokai.png)

### [Monokai Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Monokai Dimmed](https://uiwjs.github.io/react-codemirror/#/theme/data/monokai-dimmed)

![monokaiDimmed](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/monokaiDimmed.png)

### [Noctis Lilac](https://uiwjs.github.io/react-codemirror/#/theme/data/noctis-lilac)

![noctisLilac](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/noctisLilac.png)

### [Nord](https://uiwjs.github.io/react-codemirror/#/theme/data/nord)

![nord](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/nord.png)

### [Nord Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Okaidia](https://uiwjs.github.io/react-codemirror/#/theme/data/okaidia)

![okaidia](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/okaidia.png)

### [One Dark](https://github.com/codemirror/theme-one-dark)

Screenshot WIP

### [Palenight](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Quiet Light](https://uiwjs.github.io/react-codemirror/#/theme/data/quietlight)

![quietlight](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/quietlight.png)

### [Red](https://uiwjs.github.io/react-codemirror/#/theme/data/red)

![red](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/red.png)

### [Solarized Dark](https://uiwjs.github.io/react-codemirror/#/theme/data/solarized/dark)

![solarizedDark](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/solarizedDark.png)

### [Solarized Dark Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Solarized Light](https://uiwjs.github.io/react-codemirror/#/theme/data/solarized/light)

![solarizedLight](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/solarizedLight.png)

### [Solarized Light Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Sublime](https://uiwjs.github.io/react-codemirror/#/theme/data/sublime)

![sublime](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/sublime.png)

### [Synthwave84](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Tokyo Night](https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night)

![tokyoNight](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/tokyoNight.png)

### [Tokyo Night Day](https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night-day)

![tokyoNightDay](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/tokyoNightDay.png)

### [Tokyo Night Day Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Tokyo Night Storm](https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night-storm)

![tokyoNightStorm](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/tokyoNightStorm.png)

### [Tokyo Night Storm Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [Tomorrow Night Blue](https://uiwjs.github.io/react-codemirror/#/theme/data/tomorrow-night-blue)

![tomorrowNightBlue](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/tomorrowNightBlue.png)

### [Volcano](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [VSCode Dark](https://uiwjs.github.io/react-codemirror/#/theme/data/vscode/dark)

![vscodeDark](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/vscodeDark.png)

### [VSCode Dark Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [VSCode Light](https://uiwjs.github.io/react-codemirror/#/theme/data/vscode/light)

![vscodeLight](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/vscodeLight.png)

### [VSCode Light Alt](https://github.com/fsegurai/codemirror-themes)

Screenshot WIP

### [White Dark](https://uiwjs.github.io/react-codemirror/#/theme/data/white/dark)

![whiteDark](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/whiteDark.png)

### [White Light](https://uiwjs.github.io/react-codemirror/#/theme/data/white/light)

![whiteLight](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/whiteLight.png)

### [Xcode Dark](https://uiwjs.github.io/react-codemirror/#/theme/data/xcode/dark)

![xcodeDark](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/xcodeDark.png)

### [Xcode Light](https://uiwjs.github.io/react-codemirror/#/theme/data/xcode/light)

![xcodeLight](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/themes/xcodeLight.png)

</details>

## Screenshots

![editor](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/editor.png)
![settings](https://raw.githubusercontent.com/ckant/joplin-plugin-editor-themes/main/media/settings.png)

## Download

Search for `Editor Themes` in the Joplin settings under the `Plugins` section.

## Settings

| Setting          | Options                                                                                  | Description                                                   |
|------------------|------------------------------------------------------------------------------------------|---------------------------------------------------------------|
| Theme            | [Themes](https://github.com/ckant/joplin-plugin-editor-themes?tab=readme-ov-file#themes) | Applies the given theme to the CodeMirror editor              |
| Theme precedence | `"high"`, `"normal"`                                                                     | Sets the style priority (compared to Joplin's default styles) |

## Credits

- [react-codemirror](https://github.com/uiwjs/react-codemirror)
- [@fsegurai/codemirror-themes](https://github.com/fsegurai/codemirror-themes)
- [@codemirror/theme-one-dark](https://github.com/codemirror/theme-one-dark)
- [Joplin](https://joplinapp.org)
- [CodeMirror](http://codemirror.net/)

## License

Copyright © 2023 [Chris Kant](https://github.com/ckant).<br />
This project is [MIT](https://github.com/ckant/joplin-plugin-editor-themes/blob/main/LICENSE) licensed.