codemirror-theme-vitesse

Codemirror theme in vitesse style.

Install

npm install codemirror-theme-vitesse

yarn add codemirror-theme-vitesse

pnpm add codemirror-theme-vitesse

Usage

import { javascript } from '@codemirror/lang-javascript'
import { EditorState } from '@codemirror/state'
import { EditorView } from '@codemirror/view'
import { vitesseLight } from 'codemirror-theme-vitesse'
// import { vitesseDark } from 'codemirror-theme-vitesse'
// import { vitesseBlack } from 'codemirror-theme-vitesse'

const state = EditorState.create({
  doc: `const foo = 'hello world'`,
  extensions: [
    // or vitesseDark, vitesseBlack
    vitesseLight,
    javascript({ jsx: true }),
  ],
})
const view = new EditorView({
  parent: document.querySelector('#editor'),
  state,
})

Subpath import

import { vitesseBlack } from 'codemirror-theme-vitesse/black'
import { vitesseDark } from 'codemirror-theme-vitesse/dark'
import { vitesseLight } from 'codemirror-theme-vitesse/light'

Overrides default theme

Check more override settings by inspecting the type definition.

import { createVitesseLightTheme } from 'codemirror-theme-vitesse'

const vitesseLight = createVitesseLightTheme({
  settings: {
    background: '#fff9c4',
  },
})

Credits

• antfu/vscode-theme-vitesse
• shikijs/textmate-grammars-themes

License

MIT License © 2024-PRESENT ntnyq