Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fsegurai/codemirror-themes

Themes for CodeMirror 6
https://github.com/fsegurai/codemirror-themes

codemirror codemirror6 editor npm themes typescript-library

Last synced: about 8 hours 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 (9 months ago)
Default Branch: main
Last Pushed: 2025-01-06T16:10:42.000Z (10 days ago)
Last Synced: 2025-01-11T13:45:01.494Z (5 days ago)
Topics: codemirror, codemirror6, editor, npm, themes, typescript-library
Language: TypeScript
Homepage: https://fsegurai.github.io/codemirror-themes/
Size: 1010 KB
Stars: 1
Watchers: 1
Forks: 1
Open Issues: 11
Metadata Files:
- Readme: README.md
- License: LICENSE

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)

  - [Available Themes](#available-themes)

  - [Demo Application](#demo-application)

  - [Local Development](#local-development)

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

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

```

### Using a Specific 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 { basicLight } from '@fsegurai/codemirror-theme-basic-light'

let editor = new EditorView({

  doc: '# Hello World',

  extensions: [

    basicSetup,

    markdown(),

    basicLight

  ],

  parent: document.body

})

```

Read the [CodeMirror documentation](https://codemirror.net/6/examples/styling/) for more details about themes.

### Available Themes

- [All - Bundle](https://github.com/fsegurai/codemirror-themes/tree/main/packages/bundle)

- [Abcdef](https://github.com/fsegurai/codemirror-themes/tree/main/packages/abcdef)

- [Abyss](https://github.com/fsegurai/codemirror-themes/tree/main/packages/abyss)

- [Android Studio](https://github.com/fsegurai/codemirror-themes/tree/main/packages/android-studio)

- [Andromeda](https://github.com/fsegurai/codemirror-themes/tree/main/packages/andromeda)

- [Basic Light](https://github.com/fsegurai/codemirror-themes/tree/main/packages/basic-light)

- [Basic Dark](https://github.com/fsegurai/codemirror-themes/tree/main/packages/basic-dark)

- [Forest](https://github.com/fsegurai/codemirror-themes/tree/main/packages/forest)

- [GitHub Light](https://github.com/fsegurai/codemirror-themes/tree/main/packages/github-light)

- [GitHub Dark](https://github.com/fsegurai/codemirror-themes/tree/main/packages/github-dark)

- [Gruvbox Light](https://github.com/fsegurai/codemirror-themes/tree/main/packages/gruvbox-light)

- [Gruvbox Dark](https://github.com/fsegurai/codemirror-themes/tree/main/packages/gruvbox-dark)

- [Material Light](https://github.com/fsegurai/codemirror-themes/tree/main/packages/material-light)

- [Material Dark](https://github.com/fsegurai/codemirror-themes/tree/main/packages/material-dark)

- [Monokai](https://github.com/fsegurai/codemirror-themes/tree/main/packages/monokai)

- [Nord](https://github.com/fsegurai/codemirror-themes/tree/main/packages/nord)

- [Palenight](https://github.com/fsegurai/codemirror-themes/tree/main/packages/palenight)

- [Solarized Light](https://github.com/fsegurai/codemirror-themes/tree/main/packages/solarized-light)

- [Solarized Dark](https://github.com/fsegurai/codemirror-themes/tree/main/packages/solarized-dark)

- [Tokyo Night Storm](https://github.com/fsegurai/codemirror-themes/tree/main/packages/tokyo-night-storm)

- [Tokyo Night Day](https://github.com/fsegurai/codemirror-themes/tree/main/packages/tokyo-night-day)

- [Volcano](https://github.com/fsegurai/codemirror-themes/tree/main/packages/volcano)

- [VS Code Dark](https://github.com/fsegurai/codemirror-themes/tree/main/packages/vscode-dark)

- [VS Code Light](https://github.com/fsegurai/codemirror-themes/tree/main/packages/vscode-light)

For a full list, see the [@fsegurai/codemirror-theme-bundle](https://github.com/fsegurai/codemirror-themes/tree/main/packages/bundle) directory or the online demo.

### Demo Application

To see all themes in action, check out the [DEMO](https://fsegurai.github.io/codemirror-themes).

### Local Development

To set up the demo locally:

```bash

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

npm install

npm start

```

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

## License

Licensed under [MIT](https://opensource.org/licenses/MIT).