Visual Studio Code Extension: inject CSS-style to current theme

Question

I want to highlight trailing spaces in VSCode editor.

First I tried to add a CSS-style via Dev Tools like:

span .token .block .meta .leading .whitespace:last-of-type {
  background-color: red;
}

span .token .block .meta .trailing .whitespace {
  background-color: red;
}

And it behaves exactly as I need it to behave.

My next step is to pack it as an extension. I don't want to create a new theme and don't want to make a simple solution more complex.

But currently I can see only two ways to change editor's style:

• New theme
• window.createTextEditorDecorationType: https://code.visualstudio.com/docs/extensionAPI/vscode-api#window.createTextEditorDecorationType

Both solutions don't allow me just add six CSS lines to VSCode editor styles set.

The questions are:

• Did I miss an option to add own CSS styles to existing styles in VSCode?
• If this is not possible (I can understand why it may be incapsulated) what is the right way to highlight trailing spaces in VS Code extension?

Answer 1

Because of the way VS Code works, it is going to pull that data as part of the theme.

You will have to create a custom theme.

You can easily take an existing theme (copy the code directly from the VSCode github project) and make the small modification.

It would be interesting to try and make a theme whose files try to reference another existing theme in VSCode... Might have errors if a theme name changes, but then can add your css to an existing theme even if that theme was updated? But honestly, that seems more like making a not-super-simple-but-not-super-hard solution extremely complex...

Best bet is to make a theme.