jodit-ui-themes
Version:
CSS themes for the Jodit editor, its file browser and the Jodit PRO finder: Office 2010, Windows 10/11, macOS, Material 3, Dracula, Nord, Catppuccin and more
314 lines (208 loc) • 20.6 kB
Markdown
# jodit-ui-themes
[](https://www.npmjs.com/package/jodit-ui-themes)
[](https://www.npmjs.com/package/jodit-ui-themes)
[](https://www.jsdelivr.com/package/npm/jodit-ui-themes)
[](https://github.com/TimurSeyidov/jodit-ui-themes/actions/workflows/build.yml)
[](https://github.com/TimurSeyidov/jodit-ui-themes/blob/main/LICENSE)
Themes for the [Jodit](https://xdsoft.net/jodit/) editor: the editor itself, the free file browser and the Jodit PRO finder. Each theme is a plain stylesheet loaded after the Jodit styles; no Jodit rebuild is needed.
**[Live demo](https://timurseyidov.github.io/jodit-ui-themes/)**: try every theme with Jodit and Jodit PRO, including the file browsers.
## Themes
<!-- themes:start -->
### catppuccin
Catppuccin (Mocha): soothing dark pastel palette with mauve accents, blue links and folders, rounded 8px surfaces.
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jodit-ui-themes@1.3.0/themes/catppuccin/catppuccin.all.min.css" />
```
<img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/catppuccin/screenshots/main.png" alt="catppuccin: file browser over the editor" />
| Editor | Finder | Finder (Jodit PRO) |
|---|---|---|
| <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/catppuccin/screenshots/editor.png" alt="catppuccin: editor" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/catppuccin/screenshots/finder.png" alt="catppuccin: file browser" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/catppuccin/screenshots/finder-pro.png" alt="catppuccin: Jodit PRO finder" /> |
### chrome
Chrome (2023 refresh, light): light blue tab-strip toolbar, white active-tab pressed buttons, omnibox-style fields, Chrome blue #0B57D0 accent, pill buttons and rounded menus.
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jodit-ui-themes@1.3.0/themes/chrome/chrome.all.min.css" />
```
<img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/chrome/screenshots/main.png" alt="chrome: file browser over the editor" />
| Editor | Finder | Finder (Jodit PRO) |
|---|---|---|
| <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/chrome/screenshots/editor.png" alt="chrome: editor" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/chrome/screenshots/finder.png" alt="chrome: file browser" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/chrome/screenshots/finder-pro.png" alt="chrome: Jodit PRO finder" /> |
### chrome-dark
Chrome (2023 refresh, dark): dark grey tab-strip toolbar, #3C3C3C active-tab pressed buttons, omnibox-style fields, light blue #A8C7FA accent, tonal blue selection, pill buttons and rounded menus.
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jodit-ui-themes@1.3.0/themes/chrome-dark/chrome-dark.all.min.css" />
```
<img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/chrome-dark/screenshots/main.png" alt="chrome-dark: file browser over the editor" />
| Editor | Finder | Finder (Jodit PRO) |
|---|---|---|
| <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/chrome-dark/screenshots/editor.png" alt="chrome-dark: editor" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/chrome-dark/screenshots/finder.png" alt="chrome-dark: file browser" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/chrome-dark/screenshots/finder-pro.png" alt="chrome-dark: Jodit PRO finder" /> |
### dracula
Dracula: the dark charcoal-purple palette with purple accents, cyan links, red close button and purple folders.
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jodit-ui-themes@1.3.0/themes/dracula/dracula.all.min.css" />
```
<img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/dracula/screenshots/main.png" alt="dracula: file browser over the editor" />
| Editor | Finder | Finder (Jodit PRO) |
|---|---|---|
| <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/dracula/screenshots/editor.png" alt="dracula: editor" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/dracula/screenshots/finder.png" alt="dracula: file browser" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/dracula/screenshots/finder-pro.png" alt="dracula: Jodit PRO finder" /> |
### macos
macOS: unified light toolbar, 6px and 10px corners, blue menu highlight with white text, focus rings, Finder sidebar with blue folders and a blue pill under the selected file name.
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jodit-ui-themes@1.3.0/themes/macos/macos.all.min.css" />
```
<img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/macos/screenshots/main.png" alt="macos: file browser over the editor" />
| Editor | Finder | Finder (Jodit PRO) |
|---|---|---|
| <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/macos/screenshots/editor.png" alt="macos: editor" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/macos/screenshots/finder.png" alt="macos: file browser" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/macos/screenshots/finder-pro.png" alt="macos: Jodit PRO finder" /> |
### material3
Material 3 (baseline light): tonal surfaces, pill-shaped buttons and navigation items, secondary-container selection, outlined fields, 28px dialogs.
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jodit-ui-themes@1.3.0/themes/material3/material3.all.min.css" />
```
<img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/material3/screenshots/main.png" alt="material3: file browser over the editor" />
| Editor | Finder | Finder (Jodit PRO) |
|---|---|---|
| <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/material3/screenshots/editor.png" alt="material3: editor" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/material3/screenshots/finder.png" alt="material3: file browser" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/material3/screenshots/finder-pro.png" alt="material3: Jodit PRO finder" /> |
### moono
Moono (CKEditor 4): light grey gradient toolbar and status bar, bevelled buttons with a dark pressed state, grey dialog title bar with the green OK button, light blue menu highlight.
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jodit-ui-themes@1.3.0/themes/moono/moono.all.min.css" />
```
<img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/moono/screenshots/main.png" alt="moono: file browser over the editor" />
| Editor | Finder | Finder (Jodit PRO) |
|---|---|---|
| <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/moono/screenshots/editor.png" alt="moono: editor" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/moono/screenshots/finder.png" alt="moono: file browser" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/moono/screenshots/finder-pro.png" alt="moono: Jodit PRO finder" /> |
### nord
Nord: the arctic Polar Night background with Snow Storm text, Frost blue accents and folders, Aurora red close button.
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jodit-ui-themes@1.3.0/themes/nord/nord.all.min.css" />
```
<img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/nord/screenshots/main.png" alt="nord: file browser over the editor" />
| Editor | Finder | Finder (Jodit PRO) |
|---|---|---|
| <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/nord/screenshots/editor.png" alt="nord: editor" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/nord/screenshots/finder.png" alt="nord: file browser" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/nord/screenshots/finder-pro.png" alt="nord: Jodit PRO finder" /> |
### office2010
Microsoft Office 2010 look: blue ribbon gradients, golden hover and orange pressed buttons, Windows 7 dialogs, menus and form fields, Explorer-style file browsers with yellow folders and captions under the thumbnails.
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jodit-ui-themes@1.3.0/themes/office2010/office2010.all.min.css" />
```
<img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/office2010/screenshots/main.png" alt="office2010: file browser over the editor" />
| Editor | Finder | Finder (Jodit PRO) |
|---|---|---|
| <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/office2010/screenshots/editor.png" alt="office2010: editor" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/office2010/screenshots/finder.png" alt="office2010: file browser" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/office2010/screenshots/finder-pro.png" alt="office2010: Jodit PRO finder" /> |
### quietlight
Quiet Light (VS Code): lavender toolbar, lilac title bars, purple status bar, light green selection, purple accents and folders.
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jodit-ui-themes@1.3.0/themes/quietlight/quietlight.all.min.css" />
```
<img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/quietlight/screenshots/main.png" alt="quietlight: file browser over the editor" />
| Editor | Finder | Finder (Jodit PRO) |
|---|---|---|
| <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/quietlight/screenshots/editor.png" alt="quietlight: editor" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/quietlight/screenshots/finder.png" alt="quietlight: file browser" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/quietlight/screenshots/finder-pro.png" alt="quietlight: Jodit PRO finder" /> |
### syncfusion
Syncfusion (Tailwind 3 style): cool grey surfaces, indigo accent, soft shadows, rounded fields with a focus ring, indigo-tinted selection, amber folders.
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jodit-ui-themes@1.3.0/themes/syncfusion/syncfusion.all.min.css" />
```
<img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/syncfusion/screenshots/main.png" alt="syncfusion: file browser over the editor" />
| Editor | Finder | Finder (Jodit PRO) |
|---|---|---|
| <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/syncfusion/screenshots/editor.png" alt="syncfusion: editor" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/syncfusion/screenshots/finder.png" alt="syncfusion: file browser" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/syncfusion/screenshots/finder-pro.png" alt="syncfusion: Jodit PRO finder" /> |
### windows10
Windows 10 look: flat white surfaces with a thin blue window frame, square corners, light blue hover and selection, Windows 10 push buttons, fields and context menus with a red close button in dialogs, Explorer-style file browsers with flat yellow folders.
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jodit-ui-themes@1.3.0/themes/windows10/windows10.all.min.css" />
```
<img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/windows10/screenshots/main.png" alt="windows10: file browser over the editor" />
| Editor | Finder | Finder (Jodit PRO) |
|---|---|---|
| <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/windows10/screenshots/editor.png" alt="windows10: editor" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/windows10/screenshots/finder.png" alt="windows10: file browser" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/windows10/screenshots/finder-pro.png" alt="windows10: Jodit PRO finder" /> |
### windows11
Windows 11 (Fluent 2): light Mica surfaces, 4px and 8px corners, subtle grey hover, accent #005fb8, fields with an accent underline, File Explorer navigation with an accent pill.
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jodit-ui-themes@1.3.0/themes/windows11/windows11.all.min.css" />
```
<img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/windows11/screenshots/main.png" alt="windows11: file browser over the editor" />
| Editor | Finder | Finder (Jodit PRO) |
|---|---|---|
| <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/windows11/screenshots/editor.png" alt="windows11: editor" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/windows11/screenshots/finder.png" alt="windows11: file browser" /> | <img src="https://raw.githubusercontent.com/TimurSeyidov/jodit-ui-themes/main/themes/windows11/screenshots/finder-pro.png" alt="windows11: Jodit PRO finder" /> |
<!-- themes:end -->
## Files
Every theme lives in `themes/<name>/`:
| File | Contents |
|---|---|
| `<name>.all.css` | everything: editor and both file browsers |
| `<name>.editor.css` | editor: toolbar, buttons, popups and menus, dialogs, form fields, status bar |
| `<name>.finder.css` | file browsers: the free Jodit file browser and the Jodit PRO finder |
| `_theme.less` | palette and theme-specific rules (themes built on the shared base) |
| `README.md` | theme description, shown in the theme list above |
| `screenshots/` | `main.png`, `editor.png`, `finder.png`, `finder-pro.png` from `npm run screenshots` |
Each stylesheet comes as `.css`, `.min.css` and the `.less` source. The finder part relies on the editor part for buttons, inputs and menus inside the file browser window, so load either `all` or both `editor` and `finder`.
## Creating a theme
Most themes are built on the shared base in `themes/_base/`: `editor.less` and `finder.less` style everything from `--ui-*` custom properties, and `tokens.less` holds their defaults. A new theme only needs a palette:
1. Copy a theme folder close to the look you want (for example `themes/syncfusion/`) and rename the folder and the files.
2. Replace the old name with the new one inside `<name>.editor.less`, `<name>.finder.less` and `<name>.all.less`.
3. Set the colours, radii and fonts in `.theme-tokens()` in `_theme.less`; the available tokens and their defaults are listed in `themes/_base/tokens.less`. Rules that the tokens cannot express go to `.theme-editor()` and `.theme-finder()`.
4. Describe the theme in `README.md`, then run `npm run build` and `npm run screenshots`.
Names starting with `_` are partials: they are imported by the themes and are not compiled on their own. `office2010` and `windows10` are standalone stylesheets that do not use the base.
## Usage
### From a CDN
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jodit@4/es2021/jodit.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jodit-ui-themes@0/themes/office2010/office2010.all.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jodit@4/es2021/jodit.min.js"></script>
<script>
Jodit.make('#editor', { theme: 'office2010' });
</script>
```
Every file of the package is on [jsDelivr](https://www.jsdelivr.com/package/npm/jodit-ui-themes) and [unpkg](https://unpkg.com/browse/jodit-ui-themes/): `https://cdn.jsdelivr.net/npm/jodit-ui-themes@<version>/themes/<name>/<name>.<part>.min.css` or `https://unpkg.com/jodit-ui-themes@<version>/themes/<name>/<name>.<part>.min.css`. Pin an exact version (`@0.1.0`) in production; `@0` follows the latest compatible release. Each theme above has a ready-to-copy `<link>`.
### From npm
```
npm install jodit-ui-themes
```
```js
import 'jodit/es2021/jodit.min.css';
import 'jodit-ui-themes/themes/office2010/office2010.all.min.css';
import { Jodit } from 'jodit';
Jodit.make('#editor', { theme: 'office2010' });
```
The package also ships the `.less` sources, so a theme can be compiled into your own build.
### Notes
- Load the theme **after** the Jodit stylesheets.
- The same stylesheet works with Jodit and Jodit PRO.
- Switching `theme` on a live editor leaves the previous theme class in place; recreate the editor instead.
- The Jodit PRO finder keeps the last used theme in `localStorage` and prefers it over the `theme` option. Clear that value if the theme does not apply.
- The settings panel of the Jodit PRO finder resets every theme except `default` and `dark` to `default` when it opens. The themes hide its theme switch; to keep the theme, restore it when the finder changes it:
```js
const editor = Jodit.make('#editor', { theme: 'nord' });
const finder = editor.filebrowser;
finder.state.on('change.theme', () => {
if (finder.state.theme !== 'nord') {
// after the current change event, so the finder updates its classes
queueMicrotask(() => (finder.state.theme = 'nord'));
}
});
```
- If the editor lives in a shadow root, put the theme `<link>` inside the shadow root.
## Compatibility
Checked with Jodit 4.17.1 and Jodit PRO 4.15.13. Themes style Jodit's internal class names, which may change between Jodit versions.
## Building
```
npm install
npm run build # compile every themes/*/*.less into .css and .min.css
npm run watch # rebuild on every .less change
npm run screenshots # screenshots of every theme + README theme list
npm run screenshots -- office2010 # only the given themes
npm run site # assemble the live demo into _site/
```
`npm run screenshots` opens Jodit and Jodit PRO in a headless browser, saves `themes/<name>/screenshots/{main,editor,finder,finder-pro}.png` and rewrites the list between the `themes` markers in this README: for every theme its name, the description from `themes/<name>/README.md` and the screenshots. The file browsers use a built-in fake connector with fixed files, so the pictures are the same on every run. It uses the Playwright Chromium (`npx playwright install chromium`) or, when that is missing, the installed Google Chrome. Fonts come from the operating system, so take screenshots on the same machine to keep them comparable.
The generated `.css` and `.min.css` files are committed together with their `.less` sources, so a theme can be used straight from the repository. After changing a `.less` file, run `npm run build` and commit the result: CI rebuilds the themes and fails if the committed CSS is out of date.
## Live demo
`site/` holds the demo pages; `npm run site` assembles them with the built themes into `_site/` (serve it with any static server, e.g. `python3 -m http.server -d _site`). The Pages workflow deploys it on every push to `main`. Jodit and Jodit PRO come from jsDelivr in the versions listed in `devDependencies`. The file browsers read the public Jodit demo connector; actions that would change files are answered by `site/mock.js` and never reach the server.
## Releasing
```
npm version patch # or minor / major: bumps package.json, updates the CDN links in README.md, commits and tags
git push --follow-tags
```
Pushing the `v*` tag runs the Publish workflow: it checks that the tag matches `package.json`, rebuilds the themes, verifies the committed CSS and publishes the package to npm through [trusted publishing](https://docs.npmjs.com/trusted-publishers/) (no token, provenance attached). Within minutes the new version is on jsDelivr and unpkg.
## License
MIT, see [LICENSE](LICENSE).