monaco-themes

Themes for monaco editor in web browser

Usage no npm install needed!

<script type="module">
  import monacoThemes from 'https://cdn.skypack.dev/monaco-themes';
</script>

README

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');
  })