JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6790
  • Score
    100M100P100Q154470F
  • License MIT

Converts VSCode themes to monaco editor themes.

Package Exports

  • monaco-vscode-textmate-theme-converter

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (monaco-vscode-textmate-theme-converter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

monaco-vscode-textmate-theme-converter

VSCode themes are directly not compatible with monaco-editor themes. The problem here is that vscode uses tmGrammar tokens for colorization support while monaco uses its own code editor to generate language tokens. (See more about it here).

You can use monaco-textmate to make your monaco-editor tmGrammar compatible.

Once the tokens are tmGrammar compatible, you need to convert vscode generated theme data to monaco-editor compatible api. This package does exactly that.

CLI Usage:

npx monaco-vscode-textmate-theme-converter -i <input-file-or-folder-path> -o <output-file-or-folder-path>

# e.g. convert a single file
# npx monaco-vscode-textmate-theme-converter -i ./vscode-theme.json -o ./monaco-converted-theme.json

# e.g. convert a directory of vscode theme files
# npx monaco-vscode-textmate-theme-converter -i ./vscode-themes -o ./monaco-converted-themes

Programmatic Usage:

import { convertTheme, convertThemeFromDir } from 'monaco-vscode-textmate-theme-converter'; // UMD module
// import { convertTheme, convertThemeFromDir } from 'monaco-vscode-textmate-theme-converter/lib/cjs'; // cjs module

/*
 * In vscode use command: `Developer: Generate Color Theme From Current Settings`
 * Copy the generated JSON and use it as input for the function below.
 */
const theme : IVSCodeTheme = {...}
convertTheme(theme);

/*
 * Convert multiple vscode themes to monaco themes.
 * This function takes as arguments an input directory with generated vscode json files and generated output files with the same names at output directory.
 */
convertThemeFromDir(inputDir: './my-vscode-themes-collection-dir/in', outDir: './my-vscode-themes-collection-dir/out');