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,
});