---
title: Dark or Custom Theme
description: Switch Jodit to dark theme or create your own custom theme with CSS variables.
keywords: jodit theme, dark theme, custom theme, css variables
---

# Dark or Custom Theme

Switch the default light theme of Jodit to a dark one or create your own.

```html
<link rel="stylesheet" href="build/jodit.min.css" />
<script src="build/jodit.min.js"></script>
```

Create an input element:

```html
<textarea id="editor"></textarea>
```

Initialize Jodit:

```js
var editor = Jodit.make('#editor', {
	theme: 'dark'
});
```

## Result

`{example DarkTheme}`

You can also craft your own theme:

```html
<style>
	.jodit_theme_summer {
		--jd-color-background-default: #417505;
		--jd-color-border: #474025;
		--jd-color-panel: #5fd3a2;
		--jd-color-icon: #8b572a;
	}
</style>
```

Then apply this theme:

```js
Jodit.make('#summer', {
	theme: 'summer'
});
```

`{example SummerTheme}`