@fsegurai/codemirror-theme-abyss

alt="Test Status">


alt="Latest Release">

A library of custom themes for CodeMirror 6.

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

$3

- Installation
- @fsegurai/codemirror-theme-abyss
- Using Theme
- Available Themes
- Demo Application
- License

Installation

$3

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

``bash
bun install @fsegurai/codemirror-theme-abyss codemirror@^6.0.0 --save
`

Using Theme

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

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

Read the CodeMirror documentation for more details about themes.

$3

| 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 Dark | @fsegurai/codemirror-theme-basic-dark | !npm |
| Basic Light | @fsegurai/codemirror-theme-basic-light | !npm |
| Catppuccin Mocha | @fsegurai/codemirror-theme-catppuccin-mocha | !npm |
| Cobalt2 | @fsegurai/codemirror-theme-cobalt | !npm |
| Forest | @fsegurai/codemirror-theme-forest | !npm |
| GitHub Dark | @fsegurai/codemirror-theme-github-dark | !npm |
| GitHub Light | @fsegurai/codemirror-theme-github-light | !npm |
| Gruvbox Dark | @fsegurai/codemirror-theme-gruvbox-dark | !npm |
| Gruvbox Light | @fsegurai/codemirror-theme-gruvbox-light | !npm |
| High Contrast Dark | @fsegurai/codemirror-theme-high-contrast-dark | !npm |
| High Contrast Light | @fsegurai/codemirror-theme-high-contrast-light | !npm |
| Material Dark | @fsegurai/codemirror-theme-material-dark | !npm |
| Material Light | @fsegurai/codemirror-theme-material-light | !npm |
| Monokai | @fsegurai/codemirror-theme-monokai | !npm |
| Nord | @fsegurai/codemirror-theme-nord | !npm |
| Palenight | @fsegurai/codemirror-theme-palenight | !npm |
| Solarized Dark | @fsegurai/codemirror-theme-solarized-dark | !npm |
| Solarized Light | @fsegurai/codemirror-theme-solarized-light | !npm |
| Synthwave 84 | @fsegurai/codemirror-theme-synthwave-84 | !npm |
| Tokyo Night Day | @fsegurai/codemirror-theme-tokyo-night-day | !npm |
| Tokyo Night Storm | @fsegurai/codemirror-theme-tokyo-night-storm | !npm |
| Volcano | @fsegurai/codemirror-theme-volcano | !npm |
| VS Code Light | @fsegurai/codemirror-theme-vscode-light | !npm |
| VS Code Dark | @fsegurai/codemirror-theme-vscode-dark | !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:

`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.