DOCSEARCHbyAlgolia
Submit Docs

ThemeMirror

repository·main·Indexed 42 days ago

https://github.com/vadimdemedes/thememirror

A collection of ready-to-use themes for CodeMirror 6 and a utility to create custom themes. Version 2.0.1 includes built-in themes such as dracula, cobalt, and solarizedLight, as well as the createTheme() function for defining custom theme extensions with configurable variants, settings, and syntax highlighting styles.

Tokens
1.2K
Snippets
5
Records
6
Agent score
4%

What's inside ThemeMirror

  2. Use a theme in CodeMirror 6

    main

    To use a theme from thememirror, import the desired theme object and include it in the extensions array of your CodeMirror EditorState.

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

  3. Create a custom theme with createTheme()

    main

    Use createTheme(options) to generate a custom CodeMirror theme. The options object allows you to define the theme variant, editor settings (colors), and specific syntax highlighting styles.

    Options

    variant

    • Type: 'light' | 'dark'
    • Determines which styles CodeMirror applies by default.

    settings

    An object to configure the editor's visual environment:

    • background: Editor background color.
    • foreground: Default text color.
    • caret: Caret color.
    • selectionBackground: Selection background color.
    • lineHighlight: Background of highlighted lines.
    • gutterBackground: Gutter background color.
    • gutterForeground: Text color inside the gutter.

    styles

    • Type: TagStyle[]
    • An array of objects to customize syntax highlighting. Each object contains a tag (referencing CodeMirror TagStyle) and a color.
    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,
});

  5. Create a CodeMirror theme with createTheme

    main

    Import createTheme from thememirror to define a custom CodeMirror theme extension. This function serves as the primary utility for constructing theme objects compatible with CodeMirror.

    import { createTheme } from 'thememirror';

// Usage depends on the implementation in create-theme.js
const myTheme = createTheme({
  // theme configuration
});

  6. Use built-in CodeMirror themes from thememirror

    main

    ThemeMirror exports a collection of pre-configured CodeMirror theme extensions. You can import these directly to apply them to your editor instance.

    Available themes include:

    • amy
    • ayuLight
    • barf
    • bespin
    • birdsOfParadise
    • boysAndGirls
    • clouds
    • cobalt
    • coolGlow
    • dracula
    • espresso
    • noctisLilac
    • rosePineDawn
    • smoothy
    • solarizedLight
    • tomorrow
    import {
  dracula,
  amy,
  ayuLight,
  cobalt,
  // ... other themes
} from 'thememirror';

// Apply to CodeMirror
const extensions = [dracula];