Nishkalkashyap/monaco-vscode-textmate-theme-converter

monaco-vscode-textmate-theme-converter - could be useful if I use Monaco on codestuff app.

Summary

monaco-vscode-textmate-theme-converter is a TypeScript package that transforms a Visual Studio Code color theme JSON into a format the Monaco editor can consume. It addresses the mismatch where VSCode uses TextMate grammar tokens for syntax highlighting while Monaco uses its own tokenization rules, so the two editors do not accept the same theme files out of the box.

What it is useful for

This tool is useful when a web project embeds Monaco, for example an in-browser code playground, a documentation site, or a custom IDE, and you want to reuse the theme your team already uses in VSCode instead of authoring a separate Monaco theme from scratch.

It is also useful for theme authors who want one set of color rules to work in both editors, and for applications that offer several VSCode themes as selectable options for users.

A documented limitation: the converter assumes your Monaco instance is already producing TextMate-compatible tokens, which is what the separate monaco-textmate package provides. Without that prerequisite, the converted theme will not produce correct syntax highlighting on its own. The README also only documents the conversion step itself, so the surrounding Monaco integration is left to the reader.

How engineers can use it

The README documents two ways to run the converter.

For one-off conversions from the command line:

npx monaco-vscode-textmate-theme-converter -i ./vscode-theme.json -o ./monaco-converted-theme.json

It also accepts directories, so -i ./vscode-themes -o ./monaco-converted-themes reads every VSCode theme JSON in the input folder and writes a converted file of the same name to the output folder. To produce the input file, the README points to the VSCode command Developer: Generate Color Theme From Current Settings, whose JSON output is what the converter expects.

For programmatic use, the package exports convertTheme and convertThemeFromDir. The README shows the UMD import:

import { convertTheme, convertThemeFromDir } from 'monaco-vscode-textmate-theme-converter';

and notes a CommonJS variant at monaco-vscode-textmate-theme-converter/lib/cjs. convertTheme takes an IVSCodeTheme object (the JSON produced by the VSCode command) and returns the Monaco-compatible result; convertThemeFromDir accepts input and output directory path strings and processes every theme inside.

Setup details such as installing monaco-textmate separately, wiring the output into monaco.editor.defineTheme, and loading grammar files are not covered in the supplied README, so the project README should be consulted for those steps.