VS Code built-in color picker feature doesn't work in JSON files

Question

I have found info that VS Code has built-in color picker feature
But I can't figure out why it doesn't work for my JSON files.

For instance, this is my apple.json file:

{
    "apple": {
        "color": "#ff0000"
    }
}

So, color picker doesn't appear.

But - if I open VS Code's own settings.json file, and update it like so, for instance:

{
"workbench.colorCustomizations": {
    "activityBar.background": "#00AA00"
  }
}

color picker will instantly appear.

Why? How does a regular JSON file like "apple.json" differ from settings.json?

Answer 1

To have that work, you need a JSON schema associated with the json file. The schema has to say format: color on the property that represents a color. Only then a color decorator and picker is shown.

You can look here if you want to set up your own JSON schema: https://code.visualstudio.com/docs/languages/json#_json-schemas-and-settings

Answer 2

With VS Code 1.78, (see release notes) this should be possible by putting the following in your settings.json file:

"editor.defaultColorDecorators": true

It seems to be buggy right now (the decoration appears for a brief moment upon reloading the window, and then disappears), but once the bugs are ironed out, this should be a viable option as long as the strings are in a format that follows a CSS colour value format.

As for why the original difference, I presume because settings.json is a special file for VS Code, so they had colour decoration support built in for such files earlier on.

Answer 3

As of vscode v1.78 there is the ability to have the editor automatically insert that color picker (known as a "color decorator"). See much more on the functionality at https://stackoverflow.com/a/76066924/836330.

However, there are issue with that fcuntionality in json files. During testing in the Insiders Build I discovered that and filed an issue back in April, 2023: see Test: standalone color picker: in a json file: no color decorator, or it disappears.

The creator of this functionality has acknowledged the bug - please upvote the issue if you areinterested in having this work in json files.