Search code examples
jsonvisual-studio-codejsonschema

How do you display the VSCode color picker in JSON regardless of the key?

I am developing a theme and want all the HEX colors to display the VSCode color picker next to them.

Someone had asked a similar question before, but I wasn't sure how to implement it even after looking at the docs.

So I tried creating a JSON schema after this example here (Github).

I got the following code to work sort-of, but it only works if the JSON key string has the name of hex-color:

...
"type": "object",
"properties": {
    "hex-color": {"type": "string","format": "color"}
}
...

so

{
    "test": "#000", // Does not work
    "hex-color": "#000" // Works
}

When creating a VSCode theme, it's very difficult and time consuming to name every property key possible in a theme file for a schema. Is there a way to create a wildcard key, or a better way to detect if a value is a hex color?

Solution

  • I resolved my issue with the color picker not showing up in VSCode theme JSON files. (This solution may not work completely with other JSON files.)

    Add the following line to your theme:

    "$schema": "vscode://schemas/color-theme",

    This sets the file's schema to the VSCode's color theme schema, which has most if not all schemas to show the color picker on HEX colors. After some more research, I found the following repo (Github) where @wraith13 has uploaded VSCode's JSON schemas.

    The color-theme schema can be found here (v1.58.2).