'How to specify colour for dark and light theme in general in VSCode user settings

I'd like to customize VSCode colour settings in general for dark or light theme variants, for example:

"workbench.colorCustomizations": {
    "light": {
        "editor.background": "#ff0000",
    }
}

To my knowledge, however, it's only possible to define colours for all situations or for specific themes, e.g.

"workbench.colorCustomizations": {
    "editor.background": "#ff0000",
    "[Default Light+]": {
        "editor.background": "#ff0000"
    }
}

Problem with this solution is, that it applies everywhere or for one specific theme, not any light-variant theme in general.

Actually, colours do have default values for dark/light/high-contrast variants. For example, when adding colour through contributes.colors in an extension's package.json, this is how one does it:

"contributes": {
    "colors": [
        {
          "id": "mycolour",
          "description": "my colour",
          "defaults": {
            "dark": "#ffffff",
            "light": "#000000",
            "highContrast": "#010203"
          }
        }
    ]
}

Is there any way to customize a colour's generic variants in the user settings, just like in contributes.colors? The documentation I've found on this topic is not what I'd call exhaustive (just a few examples basically), but there might be things that I missed. Also, I used workbench.* in the above examples because I'm mostly interested in that setting, not in the editor.* colour settings.

visual-studio-codecolorsvariant


Solution 1:[1]

As it turns out, it's not possible yet. There's a feature request for this functionality (https://github.com/microsoft/vscode/issues/101418), so, hopefully, it might be added in the future.

Solution 2:[2]

Looks like based on @uEv340yQ3gU1's answer that for the time being this feature isn't supported. However over at https://stackoverflow.com/a/69200037/17196251 I found out that specifying multiple themes and wildcards are now supported! See https://code.visualstudio.com/updates/v1_59#_extended-theme-customization-syntax

We can do a decent workaround by specifying the wildcard [*Light*] or [*Dark*] (along with any themes you use often e.g. Monokai). Looks something like this

"workbench.colorCustomizations": {
    // Default
    "editor.background": "#000000",
    // Exception for light themes
    "[*Light*][AnotherTheme]": {
        "editor.background": "#ffffff"
    }
}

I currently use this for specifying custom bracket colorization to use white for the first bracket on dark themes and black on light themes! Woo

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 uEv340yQ3gU1
Solution 2 Parker Addison

Related Questions