# Custom Codemirror Themes
[](https://jaywcjlove.github.io/#/sponsor)
[](https://www.npmjs.com/package/@uiw/codemirror-themes)
Themes for CodeMirror.
## Install
```bash
npm install @uiw/codemirror-themes --save
```
## Usage
```js
import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { createTheme } from '@uiw/codemirror-themes';
import { javascript } from '@codemirror/lang-javascript';
import { tags as t } from '@lezer/highlight';
const myTheme = createTheme({
theme: 'light',
settings: {
background: '#ffffff',
backgroundImage: '',
foreground: '#75baff',
caret: '#5d00ff',
selection: '#036dd626',
selectionMatch: '#036dd626',
lineHighlight: '#8a91991a',
gutterBorder: '1px solid #ffffff10',
gutterBackground: '#fff',
gutterForeground: '#8a919966',
},
styles: [
{ tag: t.comment, color: '#787b8099' },
{ tag: t.variableName, color: '#0080ff' },
{ tag: [t.string, t.special(t.brace)], color: '#5c6166' },
{ tag: t.number, color: '#5c6166' },
{ tag: t.bool, color: '#5c6166' },
{ tag: t.null, color: '#5c6166' },
{ tag: t.keyword, color: '#5c6166' },
{ tag: t.operator, color: '#5c6166' },
{ tag: t.className, color: '#5c6166' },
{ tag: t.definition(t.typeName), color: '#5c6166' },
{ tag: t.typeName, color: '#5c6166' },
{ tag: t.angleBracket, color: '#5c6166' },
{ tag: t.tagName, color: '#5c6166' },
{ tag: t.attributeName, color: '#5c6166' },
],
});
const state = EditorState.create({
doc: 'my source code',
extensions: [myTheme, javascript({ jsx: true })],
});
const view = new EditorView({
parent: document.querySelector('#editor'),
state,
});
```
```jsx
import CodeMirror from '@uiw/react-codemirror';
import { createTheme } from '@uiw/codemirror-themes';
import { javascript } from '@codemirror/lang-javascript';
import { tags as t } from '@lezer/highlight';
const myTheme = createTheme({
theme: 'light',
settings: {
background: '#ffffff',
backgroundImage: '',
foreground: '#75baff',
caret: '#5d00ff',
selection: '#036dd626',
selectionMatch: '#036dd626',
lineHighlight: '#8a91991a',
gutterBackground: '#fff',
gutterForeground: '#8a919966',
},
styles: [
{ tag: t.comment, color: '#787b8099' },
{ tag: t.variableName, color: '#0080ff' },
{ tag: [t.string, t.special(t.brace)], color: '#5c6166' },
{ tag: t.number, color: '#5c6166' },
{ tag: t.bool, color: '#5c6166' },
{ tag: t.null, color: '#5c6166' },
{ tag: t.keyword, color: '#5c6166' },
{ tag: t.operator, color: '#5c6166' },
{ tag: t.className, color: '#5c6166' },
{ tag: t.definition(t.typeName), color: '#5c6166' },
{ tag: t.typeName, color: '#5c6166' },
{ tag: t.angleBracket, color: '#5c6166' },
{ tag: t.tagName, color: '#5c6166' },
{ tag: t.attributeName, color: '#5c6166' },
],
});
function App() {
return (
{
console.log('value:', value);
}}
/>
);
}
export default App;
```
## Themes
**abcdef**
**android studio**
**atom one**
**aura**
**bbedit**
**bespin**
**darcula**
**dracula**
**duotone**
**eclipse**
**github**
**gruvbox**
**material**
**noctis-lilac**
**nord**
**okaidia**
**solarized**
**sublime**
**tokyo-night**
**tokyo-night-day**
**tokyo-night-storm**
**vscode**
**xcode**
## Props
```ts
import { Extension } from '@codemirror/state';
import { TagStyle } from '@codemirror/language';
export interface CreateThemeOptions {
/**
* Theme inheritance. Determines which styles CodeMirror will apply by default.
*/
theme: Theme;
/**
* Settings to customize the look of the editor, like background, gutter, selection and others.
*/
settings: Settings;
/** Syntax highlighting styles. */
styles: TagStyle[];
}
type Theme = 'light' | 'dark';
export interface Settings {
/** Editor background color. */
background?: string;
/** Editor background image. */
backgroundImage?: string;
/** Default text color. */
foreground?: string;
/** Caret color. */
caret?: string;
/** Selection background. */
selection?: string;
/** Selection match background. */
selectionMatch?: string;
/** Background of highlighted lines. */
lineHighlight?: string;
/** Gutter background. */
gutterBackground?: string;
/** Text color inside gutter. */
gutterForeground?: string;
/** Text active color inside gutter. */
gutterActiveForeground?: string;
/** Gutter right border color. */
gutterBorder?: string;
/** set editor font */
fontFamily?: string;
}
export declare const createTheme: ({ theme, settings, styles }: CreateThemeOptions) => Extension;
export default createTheme;
```
### Related
- [@uiw/react-textarea-code-editor](https://github.com/uiwjs/react-textarea-code-editor): A simple code editor with syntax highlighting.
- [@uiw/react-md-editor](https://github.com/uiwjs/react-md-editor): A simple markdown editor with preview, implemented with React.js and TypeScript.
- [@uiw/react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor): Monaco Editor component for React.
- [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor): A markdown editor with preview, implemented with React.js and TypeScript.
- [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview): React component preview markdown text in web browser.
- [Online JSON Viewer](https://github.com/uiwjs/json-viewer) Online JSON Viewer, JSON Beautifier to beautify and tree view of JSON data - It works as JSON Pretty Print to pretty print JSON data.
## Contributors
As always, thanks to our amazing contributors!
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.
