Not all properties are documented

[anatolyburakov]

I've overridden every color selector from the official documentation, but certain things are still missing, which leads me to believe that they are not fully documented.

For example, i couldn't find any documented selectors to change colors of these tab-bar icons, despite the fact that themes can change them:

Similarly, the remote SSH button also appears to be themable, but i couldn't find a documented selector for it:

It's probably provided by an extension so this may be the wrong place to ask about it, however built-in and third-party color themes do in fact recolor this button.

Finally, I may be mistaken about this one, but i believe the key shortcuts foreground colors are not documented either:

In general, it would've been good to have some kind of tool (similar to TM scope inspector) that would show which theming values are used for a given UI element. It's probably possible with the built-in developer tools, but in this case a page documenting this process would've been good to have, as not everyone using VSCode is well-versed in all things webdev...

[anatolyburakov]

I also believe none of these colors (aside from inputbox border itself) are documented as well:

[gregvanl]

Hi @anatolyburakov Thank you for your questions. I'll try to answer them.

• The title bar icons are fixed and have a light and dark set which are used depending on whether your theme "type" is dark or light. The light icons are always used on dark themes and dark icons on light.
• The same applies to keyboard shortcut foreground colors which are hard-coded and switch depending on theme light and dark "type".
• You can change the remote Status bar button via the statusBarItem.remoteBackground / Foreground colors. https://code.visualstudio.com/api/references/theme-color#status-bar-colors
• In the search box, those icons are .svg and also have a light and dark set for use with the dark and light "type" themes.
• From looking at your screenshots, it looks like you may have set your custom theme "type" to dark when what you are trying to make is a light theme. You can check your theme .json file for the "type" attribute. If you are using the yo code extension generator to create a new color theme, you can choose either light or dark as the base theme.

[gregvanl]

Reopening in case @anatolyburakov has further questions.

[anatolyburakov]

@gregvanl thanks for detailed response!

The title bar icons are fixed and have a light and dark set which are used depending on whether your theme "type" is dark or light. The light icons are always used on dark themes and dark icons on light.

So, i can't make a light theme with dark background heading? This is one of those things that annoy me with VSCode's visual style - it looks like it's meant to be this monolithic slab of either all white or all black, with no delineation between elements and what's important. It seems that this is a big oversight, as not all visual elements have equal importance and weight.

From looking at your screenshots, it looks like you may have set your custom theme "type" to dark when what you are trying to make is a light theme.

Yes, that's exactly what i did, to illustrate a point. I started with a "light" theme as a base, because i generally like light-on-dark code (rather than dark-on-light), but i also wanted the tab bar to be dark. So i ran into this problem with icons being dark when i wanted the status bar to be dark. Switching the base theme to "dark" helps, but it has issues that i have highlighted.

So, it seems that VSCode expects the entire theme to be either light or dark, but cannot accommodate some elements being light and some dark.

[gregvanl]

@anatolyburakov I double-checked with the VS Code designers and, as you've discovered, it is intentional. Thanks for the feedback.