A library of custom themes for CodeMirror 6.

@fsegurai/codemirror-theme-tokyo-night-day is a theme for CodeMirror 6 editor, making it visually engaging and adaptable to different coding styles and user preferences.

Table of contents

• Installation
  • @fsegurai/codemirror-theme-tokyo-night-day
  • Using Theme
  • Available Themes
  • Demo Application
• License

Installation

@fsegurai/codemirror-theme-tokyo-night-day

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

bun install @fsegurai/codemirror-theme-tokyo-night-day codemirror@^6.0.0 --save

Using Theme

Import the respective 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 { tokyoNightDay } from '@fsegurai/codemirror-theme-tokyo-night-day'

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

Read the CodeMirror documentation for more details about themes.

Available 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 | |

Demo Application

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.

License

Licensed under MIT.