Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

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

fsegurai7.5kMIT6.2.0TypeScript support: included

Tokyo Night Storm theme for the CodeMirror code editor

editor, diff, diff-editor, code, codemirror, theme, themes, syntax, highlight, tokyo, night, storm, tokyo-night-storm

readme

CodeMirror 6 Themes Logo

Test Status Latest Release
GitHub contributors Dependency status for repo GitHub License
Stars Forks

A library of custom themes for CodeMirror 6.

@fsegurai/codemirror-theme-tokyo-night-storm 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-storm

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

npm install @fsegurai/codemirror-theme-tokyo-night-storm 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 { tokyoNightStorm } from '@fsegurai/codemirror-theme-basic-tokyo-night-storm'

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

Read the CodeMirror documentation for more details about themes.

Available Themes

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

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
npm install
npm start

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

License

Licensed under MIT.