CODEWITHSUNDEEP
visual-studio-codecolorsvariant
uEv340yQ3gU1
uEv340yQ3gU1

Reputation: 111

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.

Upvotes: 10

Views: 2473

Answers (2)

uEv340yQ3gU1
uEv340yQ3gU1

Reputation: 111

https://github.com/microsoft/vscode/issues/101418 was a feature request for this but it was closed and locked in 2021.

Upvotes: 1

pargrey
pargrey

Reputation: 111

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

Upvotes: 11

Related Questions