javascriptmonaco-editor

Is there a way to set token background color in monaco editor?

I want to customize a language with tokens that have a background color. Setting foreground color (the color of the text itself) is as simple as setting the foreground option:

{
    token: "comment.css",
    foreground: "000000", // this will make the font color black
    background: "0000ff"  // this will not make the background blue
}

However a similar background option does nothing in monaco 0.38.0 (and apparently in 0.44.0, as I tested in playground).

Can you provide any solution to this, even a hacky one?

Solution

  • Background colors are not possible by design. Try creating a theme using a json file and open that in VS Code. It will show you:

    enter image description here

    This is relevant, because the Monaco editor is the extracted editor component from VS Code.