A library of custom themes for CodeMirror 6.

@fsegurai/codemirror-theme-bundle is a collection of themes to enhance CodeMirror 6 editor, making it visually engaging and adaptable to different coding styles and user preferences.

Table of contents

• Installation
  • @fsegurai/codemirror-theme-bundle
  • Using a Specific Theme
  • Available Themes
  • Demo Application
  • Local Development
• License

Installation

@fsegurai/codemirror-theme-bundle

To add @fsegurai/codemirror-theme-bundle along with CodeMirror 6 to your package.json use the following commands.

npm install @fsegurai/codemirror-theme-bundle codemirror@^6.0.0 --save

Using a Specific Theme

Import the desired theme from the package and apply it to your CodeMirror instance as shown below.

import { EditorView, basicSetup } from 'codemirror'
import { markdown } from '@codemirror/lang-markdown'
import { basicLight } from '@fsegurai/codemirror-theme-basic-light'

let editor = new EditorView({
  doc: '# Hello World',
  extensions: [
    basicSetup,
    markdown(),
    basicLight
  ],
  parent: document.body
})

Read the CodeMirror documentation for more details about themes.

Available Themes

• All - Bundle
• Abcdef
• Abyss
• Android Studio
• Andromeda
• Basic Light
• Basic Dark
• Forest
• GitHub Light
• GitHub Dark
• Gruvbox Light
• Gruvbox Dark
• Material Light
• Material Dark
• Monokai
• Nord
• Palenight
• Solarized Light
• Solarized Dark
• Tokyo Night Storm
• Tokyo Night Day
• Volcano
• VS Code Dark
• VS Code Light

For a full list, see the @fsegurai/codemirror-theme-bundle directory or the online demo.

Demo Application

To see all themes in action, check out the DEMO.

Local Development

To set up the demo locally:

git clone https://github.com/fsegurai/codemirror-themes.git
npm install
npm start

This will serve the application locally at http://[::1]:8000.

License

Licensed under MIT.