Skip to content

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

License

Notifications You must be signed in to change notification settings

ithot-all/monaco-themes

 
 

Repository files navigation

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 76.0%
  • HTML 24.0%