Separate theme_overrides settings for dark and light mode

[jannisborgers]

I have this in my settings.json:

{
"theme": {
    "mode": "system",
    "light": "Catppuccin Latte",
    "dark": "Palenight Theme"
  },
  "experimental.theme_overrides": {
    "editor.foreground": "#6A718A",
  }
}

theme_overrides override both dark and light themes. In the case above, editor.foreground is way too dark against the editor background from the Palenight theme, which activates with dark mode via the system. I have a lot of other overrides for UI elements and syntax that I tuned for my needs in the light theme, which simply don’t work in the dark theme.

It would be helpful if the overrides could be defined for all, light and dark separately, where values in light or dark take precedence over values in all:

{
"theme": {
    "mode": "system",
    "light": "Catppuccin Latte",
    "dark": "Palenight Theme"
  },
  "experimental.theme_overrides": {
    "all": {
      "modified": "#275fe4",
      "syntax": {
        "property": {
          "color": "#000"
        }
      }
    },
    "light": {
      "editor.foreground": "#6A718A",
      "syntax": {
        "property": {
          "color": "#6A718A" // takes precedence
        }
      }
    },
    "dark": {
      "panel.background": "#6A718A",
      "modified": "#275fe4", // takes precedence
     }
  }
}

Note that this is different from per-project themes or per-filetype theme overrides (which would also be very cool to see), so if all three see the light of day, complexity concerning precedence is added.

[aurexav]

Definitely need this!

[ddbrierton]

Agreed, and I think it should be taken further to include per-theme overrides. So you have overrides for all (e.g. italic comments), overrides for dark mode and light mode, and overrides for specific themes.

Use case: suppose I am using a theme where everything is great except the colour of comments. I don't want green comments, I want them to be grey, so I specifically choose a grey colour from the theme's palette. Clearly that is a choice that I don't want necessarily applied to other themes that have a different colour palette.

[ddbrierton]

Also note existing tickets regarding this topic:

#14050

#30860

[ddbrierton]

Release 0.200.4 introduced per theme overrides:

Added the ability to set theme-specific overrides via the theme_overrides setting. (#30860; thanks hron)

Does someone know the exact syntax to use for this? I can't seem to figure it out and the documentation for this feature is not out yet.

[vasyafromrussia]

It's the same as for experimental.theme_overrides, but per name. I.e. it's an object with theme keys. Like this:

"theme_overrides": {
    "Catppuccin Latte": {
      "syntax": {
        "type": {
          "color": "#4c4f69",
          "font_weight": 500
        }
      }
    }
  }