Themes to be used and generated with monaco-editor in web browser
Switch branches/tags
Nothing to show
Clone or download
Latest commit 718a060 Aug 19, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
scripts Usable in browser Aug 14, 2018
src Use 6 digit hex codes and remove # Aug 15, 2018
themes Use 6 digit hex codes and remove # Aug 15, 2018
.gitignore Usable in browser Aug 14, 2018
.npmignore Usable in browser Aug 14, 2018
LICENSE Add license Aug 13, 2018
README.md Add link Aug 15, 2018
index.html Fix url Aug 15, 2018
package-lock.json Fix selection highlight border Aug 14, 2018
package.json Make beta as main Aug 19, 2018
webpack.config.js Usable in browser Aug 14, 2018

README.md

monaco-themes

See extended demo at https://editor-a5ea1.firebaseapp.com/

A list of theme definitions to be used with monaco-editor in browser. See 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');
  })