ThemeMirror

Beautiful themes for CodeMirror

Install

npm install thememirror

Usage

import {EditorView} from '@codemirror/view';
import {EditorState} from '@codemirror/state';
import {dracula} from 'thememirror';

const state = EditorState.create({
	doc: 'my source code',
	extensions: [dracula],
});

const view = new EditorView({
	parent: document.querySelector('#editor'),
	state,
});

Themes

Amy

Author: William D. Neumann

import {amy} from 'thememirror';

Ayu Light

Author: Konstantin Pschera

import {ayuLight} from 'thememirror';

Barf

Author: unknown

import {barf} from 'thememirror';

Bespin

Author: Michael Diolosa

import {bespin} from 'thememirror';

Birds of Paradise

Author: Joe Bergantine

import {birdsOfParadise} from 'thememirror';

Boys and Girls

Author: unknown

import {boysAndGirls} from 'thememirror';

Clouds

Author: Fred LeBlanc

import {clouds} from 'thememirror';

Cobalt

Author: Jacob Rus

import {cobalt} from 'thememirror';

Cool Glow

Author: unknown

import {coolGlow} from 'thememirror';

Dracula

Author: Zeno Rocha

import {dracula} from 'thememirror';

Espresso

Author: TextMate

import {espresso} from 'thememirror';

Noctis Lilac

Author: Liviu Schera

import {noctisLilac} from 'thememirror';

Rosé Pine Dawn

Author: Rosé Pine

import {rosePineDawn} from 'thememirror';

Smoothy

Author: Kenneth Reitz

import {smoothy} from 'thememirror';

Solarized Light

Author: Ethan Schoonover

import {solarizedLight} from 'thememirror';

Tomorrow

Author: Chris Kempson

import {tomorrow} from 'thememirror';

API

createTheme(options)

Create your own theme.

options

variant

Type: 'light' | 'dark'

Theme variant. Determines which styles CodeMirror will apply by default.

settings

background

Type: string

Editor background.

foreground

Type: string

Default text color.

caret

Type: string

Caret color.

selection

Type: string

Selection background.

lineHighlight

Type: string

Background of highlighted lines.

gutterBackground

Type: string

Gutter background.

gutterForeground

Type: string

Text color inside gutter.

styles

Type: TagStyle[]

Array of styles to customize syntax highlighting. See TagStyle for a list of available tags to style.

import {createTheme} from 'thememirror';
import {EditorView} from '@codemirror/view';
import {EditorState} from '@codemirror/state';

const myTheme = createTheme({
	variant: 'dark',
	settings: {
		background: '#00254b',
		foreground: '#fff',
		caret: '#fff',
		selectionBackground: '#b36539bf',
		gutterBackground: '#00254b',
		gutterForeground: '#ffffff70',
		lineHighlight: '#00000059',
	},
	styles: [
		{
			tag: t.comment,
			color: '#0088ff',
		},
	],
});

const state = EditorState.create({
	doc: 'my source code',
	extensions: [myTheme],
});

const view = new EditorView({
	parent: document.querySelector('#editor'),
	state,
});