---
title: UI Themes for Jodit
description: Ten ready-made themes for the Jodit editor, its file browser and the PRO Finder: Office 2010, Windows 10 and 11, macOS, Material 3, Nord, Dracula, Catppuccin, Syncfusion and Moono. One stylesheet from a CDN, live demo inside.
keywords: jodit theme, jodit ui themes, wysiwyg editor theme, dark theme editor, office 2010 editor, windows 11 editor theme, material design editor
---

# UI Themes for Jodit

[![npm](https://img.shields.io/npm/v/jodit-ui-themes)](https://www.npmjs.com/package/jodit-ui-themes) [![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/jodit-ui-themes)](https://www.jsdelivr.com/package/npm/jodit-ui-themes) [![License: MIT](https://img.shields.io/npm/l/jodit-ui-themes)](https://github.com/TimurSeyidov/jodit-ui-themes/blob/main/LICENSE)

![Jodit in the Nord theme: file browser over the editor](images/theme-nord-main.webp 'hero')

[jodit-ui-themes](https://github.com/TimurSeyidov/jodit-ui-themes) is a set of ten themes for the Jodit editor, the free file browser and the Jodit PRO Finder. Each theme is a plain stylesheet loaded after the Jodit CSS; the editor only needs its `theme` option set. Written and maintained by [Timur Seyidov](https://github.com/TimurSeyidov) under the MIT license. Every theme can be tried on the author's [demo page](https://timurseyidov.github.io/jodit-ui-themes/), with the PRO Finder included.

```tldr
Install: `npm install jodit-ui-themes`, or take the CSS straight from jsDelivr
Use: load `themes/<name>/<name>.all.min.css` after the Jodit stylesheet and pass `theme: '<name>'` to `Jodit.make`
Scope: `.all.css` styles everything; `.editor.css` and `.finder.css` split the editor and the file browsers
PRO: the same stylesheet themes the Jodit PRO Finder
Build: every theme ships its `.less` source, so you can compile a palette of your own on the shared base
```

## Try it

Pick a theme; the editor is re-created with the new stylesheet.

```html
<!-- Example Start -->
<label for="theme-select">Theme</label>
<select id="theme-select" style="margin: 0 0 12px 8px; padding: 4px 8px;">
	<option value="">Jodit default</option>
	<option value="catppuccin">Catppuccin</option>
	<option value="dracula">Dracula</option>
	<option value="macos">macOS</option>
	<option value="material3">Material 3</option>
	<option value="moono">Moono (CKEditor 4)</option>
	<option value="nord">Nord</option>
	<option value="office2010">Office 2010</option>
	<option value="syncfusion">Syncfusion</option>
	<option value="windows10">Windows 10</option>
	<option value="windows11">Windows 11 (Fluent 2)</option>
</select>
<textarea id="themed-editor"></textarea>
<script>
	(function () {
		var CDN = 'https://cdn.jsdelivr.net/npm/jodit-ui-themes@1/themes/';
		var select = document.getElementById('theme-select');
		var editor = null;
		var link = null;
		var value =
			'<h2>Themed Jodit</h2>' +
			'<p>The <strong>same editor</strong>, a different stylesheet. Open the image dialog or the file browser to see the themed panels.</p>' +
			'<ul><li>Toolbar, popups and dialogs</li><li>Free file browser and PRO Finder</li><li>One CSS file from a CDN</li></ul>';

		function apply(name) {
			if (editor) {
				editor.destruct();
				editor = null;
			}
			if (link) {
				link.remove();
				link = null;
			}
			if (name) {
				link = document.createElement('link');
				link.rel = 'stylesheet';
				link.href = CDN + name + '/' + name + '.all.min.css';
				document.head.appendChild(link);
			}
			editor = Jodit.make('#themed-editor', {
				theme: name || 'default',
				height: 340
			});
			editor.value = value;
		}

		select.addEventListener('change', function () {
			apply(this.value);
		});
		select.value = 'nord';
		apply('nord');
	})();
</script>
<!-- Example End -->
```

## Themes

### 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/themes/catppuccin/catppuccin.all.min.css"
/>
```

![Catppuccin theme: the file browser over the editor](images/theme-catppuccin-main.webp)

### 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/themes/dracula/dracula.all.min.css"
/>
```

![Dracula theme: the file browser over the editor](images/theme-dracula-main.webp)

### 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/themes/macos/macos.all.min.css"
/>
```

![macOS theme: the file browser over the editor](images/theme-macos-main.webp)

### Material 3

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/themes/material3/material3.all.min.css"
/>
```

![Material 3 theme: the file browser over the editor](images/theme-material3-main.webp)

### Moono (CKEditor 4)

Moono: 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/themes/moono/moono.all.min.css"
/>
```

![Moono (CKEditor 4) theme: the file browser over the editor](images/theme-moono-main.webp)

### 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/themes/nord/nord.all.min.css"
/>
```

![Nord theme: the file browser over the editor](images/theme-nord-main.webp)

### Office 2010

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/themes/office2010/office2010.all.min.css"
/>
```

![Office 2010 theme: the file browser over the editor](images/theme-office2010-main.webp)

### 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/themes/syncfusion/syncfusion.all.min.css"
/>
```

![Syncfusion theme: the file browser over the editor](images/theme-syncfusion-main.webp)

### Windows 10

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/themes/windows10/windows10.all.min.css"
/>
```

![Windows 10 theme: the file browser over the editor](images/theme-windows10-main.webp)

### Windows 11 (Fluent 2)

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/themes/windows11/windows11.all.min.css"
/>
```

![Windows 11 (Fluent 2) theme: the file browser over the editor](images/theme-windows11-main.webp)

## Usage

````steps
### 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@1/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/).

### From npm

```bash
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' });
```

### Pick the right file

| File | Styles |
| --- | --- |
| `<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 |

The finder part relies on the editor part for buttons, inputs and menus inside the file browser window, so load either `all` or both. Each stylesheet comes as `.css`, `.min.css` and the `.less` source.
````

## Good to know

```features
- **Load order matters**: the theme stylesheet goes after the Jodit CSS, otherwise Jodit's defaults win.
- **Switching at runtime**: changing `theme` on a live editor leaves the previous theme class in place. Destroy and re-create the editor, as the demo above does.
- **PRO Finder remembers**: the Jodit PRO Finder keeps the last used theme in localStorage and prefers it over the `theme` option. Clear that value if a theme does not apply.
- **Shadow DOM**: if the editor lives in a shadow root, put the theme `<link>` inside the shadow root.
- **Versions**: themes style Jodit's internal class names, which can change between Jodit versions. Checked with Jodit 4.17 and Jodit PRO 4.15.
- **Your own theme**: copy a theme folder, set colours, radii and fonts in `.theme-tokens()` and run `npm run build`; the shared base styles everything from `--ui-*` custom properties.
```

## Links

```cards
- [Demo by the author](https://timurseyidov.github.io/jodit-ui-themes/): All ten themes on the editor, the file browser and the PRO Finder.
- [GitHub](https://github.com/TimurSeyidov/jodit-ui-themes): Sources, LESS, screenshots and the theme-building guide. MIT.
- [npm](https://www.npmjs.com/package/jodit-ui-themes): jodit-ui-themes releases.
- [jsDelivr](https://www.jsdelivr.com/package/npm/jodit-ui-themes): Every theme file on the CDN.
- [Dark or custom theme](./dark.html): The built-in dark theme and Jodit's own theming hooks.
- [Jodit PRO Finder](/jodit/pro/docs/plugin/finder/): The file manager these themes also style.
```