code-mirror-night-owl

Night Owl Theme for codemirror 6, based on the Night Owl VS Code theme.

Install

npm install code-mirror-night-owl

Usage

Basic setup

import { EditorState } from "@codemirror/state";
import { EditorView } from "@codemirror/view";
import { javascript } from "@codemirror/lang-javascript";
import { nightOwl } from "code-mirror-night-owl/night-owl";

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

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

Light theme

import { EditorState } from "@codemirror/state";
import { EditorView } from "@codemirror/view";
import { javascript } from "@codemirror/lang-javascript";
import { nightOwlLight } from "code-mirror-night-owl/night-owl-light";

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

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

API Reference

nightOwl, nightOwlLight : Extension

Extension to enable the Night Owl and Night Owl Light theme (both the editor theme and the highlight style).

nightOwlTheme, nightOwlLightTheme : Extension

The editor theme styles for Night Owl.

nightOwlHighlightStyle , nightOwlLightHighlightStyle: HighlightStyle

The highlighting style for code in the Night Owl theme.

colors : Javascript Object

The colors used in the theme, as CSS color strings.