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.

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

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

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

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 {bundle} from '@fsegurai/codemirror-theme-bundle'

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

Read the CodeMirror documentation for more details about themes.

Theme	Package	Version
All - Bundle	@fsegurai/codemirror-theme-bundle
Abcdef	@fsegurai/codemirror-theme-abcdef
Abyss	@fsegurai/codemirror-theme-abyss
Android Studio	@fsegurai/codemirror-theme-android-studio
Andromeda	@fsegurai/codemirror-theme-andromeda
Basic Dark	@fsegurai/codemirror-theme-basic-dark
Basic Light	@fsegurai/codemirror-theme-basic-light
Catppuccin Mocha	@fsegurai/codemirror-theme-catppuccin-mocha
Cobalt2	@fsegurai/codemirror-theme-cobalt
Forest	@fsegurai/codemirror-theme-forest
GitHub Dark	@fsegurai/codemirror-theme-github-dark
GitHub Light	@fsegurai/codemirror-theme-github-light
Gruvbox Dark	@fsegurai/codemirror-theme-gruvbox-dark
Gruvbox Light	@fsegurai/codemirror-theme-gruvbox-light
High Contrast Dark	@fsegurai/codemirror-theme-high-contrast-dark
High Contrast Light	@fsegurai/codemirror-theme-high-contrast-light
Material Dark	@fsegurai/codemirror-theme-material-dark
Material Light	@fsegurai/codemirror-theme-material-light
Monokai	@fsegurai/codemirror-theme-monokai
Nord	@fsegurai/codemirror-theme-nord
Palenight	@fsegurai/codemirror-theme-palenight
Solarized Dark	@fsegurai/codemirror-theme-solarized-dark
Solarized Light	@fsegurai/codemirror-theme-solarized-light
Synthwave 84	@fsegurai/codemirror-theme-synthwave-84
Tokyo Night Day	@fsegurai/codemirror-theme-tokyo-night-day
Tokyo Night Storm	@fsegurai/codemirror-theme-tokyo-night-storm
Volcano	@fsegurai/codemirror-theme-volcano
VS Code Light	@fsegurai/codemirror-theme-vscode-light
VS Code Dark	@fsegurai/codemirror-theme-vscode-dark

To see all themes in action, check out the demo: https://fsegurai.github.io/codemirror-themes.

To set up the demo locally:

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

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

Licensed under MIT.