tenluap/monaco-themes

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

monaco-themes

See extended demo at https://editor.bitwiser.in

A list of theme definitions to be used with monaco-editor in browser. See minimal demo

Usage

npm install monaco-themes

API

Using <script>

<script type="text/javascript" src="https://unpkg.com/monaco-themes/dist/monaco-themes.js"></script>
<script type="text/javascript">
    var tmThemeString = /* read using FileReader */
    var themeData = MonacoThemes.parseTmTheme(tmThemeString);
    monaco.editor.defineTheme('mytheme', themeData);
    monaco.editor.setTheme('mytheme');
</script>

Using webpack/node

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

Directly using themes

With webpack

const monaco = /* require monaco */

import('monaco-themes/themes/Monokai.json')
  .then(data => {
      monaco.editor.defineTheme('monokai', data);
  })

Independently

Download this repository and extract and save themes directory in your project.

/* load monaco */

fetch('/themes/Monokai.json')
  .then(data => data.json())
  .then(data => {
    monaco.editor.defineTheme('monokai', data);
    monaco.editor.setTheme('monokai');
  })