https://github.com/fsegurai/codemirror-themes
Themes for CodeMirror 6
https://github.com/fsegurai/codemirror-themes
codemirror codemirror-6 diff diff-editor editor highlight javascript library syntax themes typescript
Last synced: 3 months ago
JSON representation
Themes for CodeMirror 6
- Host: GitHub
- URL: https://github.com/fsegurai/codemirror-themes
- Owner: fsegurai
- License: mit
- Created: 2024-04-28T17:35:56.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2026-03-25T04:49:58.000Z (3 months ago)
- Last Synced: 2026-03-26T09:47:05.713Z (3 months ago)
- Topics: codemirror, codemirror-6, diff, diff-editor, editor, highlight, javascript, library, syntax, themes, typescript
- Language: TypeScript
- Homepage: https://fsegurai.github.io/codemirror-themes/
- Size: 4.17 MB
- Stars: 25
- Watchers: 2
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
**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](#installation)
- [@fsegurai/codemirror-theme-bundle](#@fseguraicodemirror-theme-bundle)
- [Using a Specific Theme](#using-a-specific-theme)
- [More Resources](#more-resources)
- [Available Themes](#available-themes)
- [Demo Application](#demo-application)
- [License](#license)
## Installation
### @fsegurai/codemirror-theme-bundle
To add `@fsegurai/codemirror-theme-bundle` along with CodeMirror 6 to your `package.json` use the following commands.
```bash
bun install @fsegurai/codemirror-theme-bundle codemirror@^6.0.0 --save
```
### Using a Theme
Import the desired theme from the package and apply it to your CodeMirror instance as shown below.
```javascript
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](https://codemirror.net/6/examples/styling/) for more details about themes.
### Available Themes
| Theme | Package | Version |
|---------------------|--------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------|
| All - Bundle | [@fsegurai/codemirror-theme-bundle](https://www.npmjs.com/package/@fsegurai/codemirror-theme-bundle) |  |
| Abcdef | [@fsegurai/codemirror-theme-abcdef](https://www.npmjs.com/package/@fsegurai/codemirror-theme-abcdef) |  |
| Abyss | [@fsegurai/codemirror-theme-abyss](https://www.npmjs.com/package/@fsegurai/codemirror-theme-abyss) |  |
| Android Studio | [@fsegurai/codemirror-theme-android-studio](https://www.npmjs.com/package/@fsegurai/codemirror-theme-android-studio) |  |
| Andromeda | [@fsegurai/codemirror-theme-andromeda](https://www.npmjs.com/package/@fsegurai/codemirror-theme-andromeda) |  |
| Basic Dark | [@fsegurai/codemirror-theme-basic-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-basic-dark) |  |
| Basic Light | [@fsegurai/codemirror-theme-basic-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-basic-light) |  |
| Catppuccin Mocha | [@fsegurai/codemirror-theme-catppuccin-mocha](https://www.npmjs.com/package/@fsegurai/codemirror-theme-catppuccin-mocha) |  |
| Cobalt2 | [@fsegurai/codemirror-theme-cobalt](https://www.npmjs.com/package/@fsegurai/codemirror-theme-cobalt2) |  |
| Forest | [@fsegurai/codemirror-theme-forest](https://www.npmjs.com/package/@fsegurai/codemirror-theme-forest) |  |
| GitHub Dark | [@fsegurai/codemirror-theme-github-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-github-dark) |  |
| GitHub Light | [@fsegurai/codemirror-theme-github-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-github-light) |  |
| Gruvbox Dark | [@fsegurai/codemirror-theme-gruvbox-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-gruvbox-dark) |  |
| Gruvbox Light | [@fsegurai/codemirror-theme-gruvbox-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-gruvbox-light) |  |
| High Contrast Dark | [@fsegurai/codemirror-theme-high-contrast-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-high-contrast-dark) |  |
| High Contrast Light | [@fsegurai/codemirror-theme-high-contrast-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-high-contrast-light) |  |
| Material Dark | [@fsegurai/codemirror-theme-material-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-dark) |  |
| Material Light | [@fsegurai/codemirror-theme-material-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-light) |  |
| Monokai | [@fsegurai/codemirror-theme-monokai](https://www.npmjs.com/package/@fsegurai/codemirror-theme-monokai) |  |
| Nord | [@fsegurai/codemirror-theme-nord](https://www.npmjs.com/package/@fsegurai/codemirror-theme-nord) |  |
| Palenight | [@fsegurai/codemirror-theme-palenight](https://www.npmjs.com/package/@fsegurai/codemirror-theme-palenight) |  |
| Solarized Dark | [@fsegurai/codemirror-theme-solarized-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-solarized-dark) |  |
| Solarized Light | [@fsegurai/codemirror-theme-solarized-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-solarized-light) |  |
| Synthwave 84 | [@fsegurai/codemirror-theme-synthwave-84](https://www.npmjs.com/package/@fsegurai/codemirror-theme-synthwave-84) |  |
| Tokyo Night Day | [@fsegurai/codemirror-theme-tokyo-night-day](https://www.npmjs.com/package/@fsegurai/codemirror-theme-tokyo-night-day) |  |
| Tokyo Night Storm | [@fsegurai/codemirror-theme-tokyo-night-storm](https://www.npmjs.com/package/@fsegurai/codemirror-theme-tokyo-night-storm) |  |
| Volcano | [@fsegurai/codemirror-theme-volcano](https://www.npmjs.com/package/@fsegurai/codemirror-theme-volcano) |  |
| VS Code Light | [@fsegurai/codemirror-theme-vscode-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-vscode-light) |  |
| VS Code Dark | [@fsegurai/codemirror-theme-vscode-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-vscode-dark) |  |
## Demo Application
To see all themes in action, check out the
demo: [https://fsegurai.github.io/codemirror-themes](https://fsegurai.github.io/codemirror-themes).
To set up the demo locally:
```bash
git clone https://github.com/fsegurai/codemirror-themes.git
bun install
bun start
```
This will serve the application locally at [http://[::1]:8000](http://[::1]:8000).
## License
Licensed under [MIT](https://opensource.org/licenses/MIT).