https://github.com/brijeshb42/monaco-themes

Themes to be used and generated with monaco-editor in web browser
https://github.com/brijeshb42/monaco-themes

Last synced: 2 days ago
JSON representation

Themes to be used and generated with monaco-editor in web browser

• Host: GitHub
• URL: https://github.com/brijeshb42/monaco-themes
• Owner: brijeshb42
• License: mit
• Created: 2018-08-13T18:05:44.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-08-20T17:41:32.000Z (4 months ago)
• Last Synced: 2024-12-14T22:02:51.376Z (9 days ago)
• Language: JavaScript
• Homepage: https://editor.bitwiser.in/
• Size: 312 KB
• Stars: 448
• Watchers: 4
• Forks: 64
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## monaco-themes

See extended demo at [https://editor.bitwiser.in](https://editor.bitwiser.in)

A list of theme definitions to be used with [monaco-editor](https://microsoft.github.io/monaco-editor/) in browser. See [minimal demo]('https://bitwiser.in/monaco-themes/')

### Usage

```sh

npm install monaco-themes

```

#### API

##### Using ``

```html

<script type="text/javascript" src="https://unpkg.com/monaco-themes/dist/monaco-themes.js">

    var tmThemeString = /* read using FileReader */

    var themeData = MonacoThemes.parseTmTheme(tmThemeString);

    monaco.editor.defineTheme('mytheme', themeData);

    monaco.editor.setTheme('mytheme');

```

##### Using webpack/node

```js

const parseTmTheme = require('monaco-themes').parseTmTheme;

```

#### Directly using themes

##### With webpack

```js

const monaco = /* require monaco */

import('monaco-themes/themes/Monokai.json')

  .then(data => {

      monaco.editor.defineTheme('monokai', data);

  })

```

##### Independently

Download this [repository](https://github.com/brijeshb42/monaco-themes/archive/master.zip) and extract and save `themes` directory in your project.

```js

/* load monaco */

fetch('/themes/Monokai.json')

  .then(data => data.json())

  .then(data => {

    monaco.editor.defineTheme('monokai', data);

    monaco.editor.setTheme('monokai');

  })

```