How can a VS Code extension provide colour decorations?

Question

I want to create colour decorations like those that VS Code draws for CSS colour literals. I know that VS Code has the editor.defaultColorDecorators setting, but I want to add support for patterns that are not matched by VS Code's builtin functionality. How can I do that in a VS Code extension?

Answer 1

You can implement DocumentColorProvider, which allows you to provide ColorPresentations and document colours.

For related historical discussion on the design of this part of the extension API, see ColorProvider API: Let extensions define the color formats #34366 and Color Picker: Finalize Color Picker API #32235.

If you want to look at examples of how more complicated language provider extensions do this, you could take a look at the Dart/Flutter extension: [Feature Request] Color Picker for Flutter's Color(s) similar to CSS #3240, which does it at the layer of its LSP server, or the C# extension, which makes use of VS Code's vscode.executeDocumentColorProvider command and also does most of the work at the lanugage server layer.