Support to theme the entire workbench

[SetTrend]

Currently, color themes are not getting applied to the toolbar on the left:

I tend to believe this is not intentional as it inhibits accessibility, e.g. with high-contrast themes.

So I propose to have themes apply to the VS Code toolbar, too.

[akamud]

+1. I get a lot of people asking for this for my theme. I assume a lot of theme developers do.

[MLefebvreICO]

Can we get some feedback on this ?

[Kainax]

+1 Please add sidebar coloring theme

[clssw1004]

Very much agree with

[lucsky]

+100

[nfantone]

Currently, themes other than the default tend to look kinda awkward when displayed alongside the toolbar and sidebar. See, for instance, how it can change the general look and feel when using something like VScode Custom CSS extension.

[be5invis]

+1

[leaxoy]

+1

[wprater]

@martinsuchan our theming support is currently limited to what can be done via DOM APIs, but does not cover native elements outside that area (like the menu bar).

@bpasero can we expect support for setting -webkit-font-smooting on each part? e.g. setting a value on the status bar and explorer and another on the editor pane?

[pseudo-su]

I've switched to insiders so I can test the Solarized Dark theme.

I'm not sure if these are issues with the theme or the theming support but I've tried to find all the ui areas that I think aren't themed yet. Some are pretty minor but hopefully it helps.

Autocomplete box

Background on startup

Button outline in debug panel

Disable and uninstall buttons

Vscode feedback popup

Right sidebar in git diff view

Search and replace dropdown on hover

Selected tab underline in bottom tray

Total settings count background and gray lines

Sidebar file selection highlighting.

Selected (blue), hovered (dark gray) and out of focus (lighter gray)

Welcome page quick links

[equinusocio]

@bpasero So at the moment we can only change the statusbar color?

"workbench.experimental.colorCustomizations": {
    "statusBarBackground": "#00EECC",
    "statusBarNoFolderBackground": "#CCEE00",
    "statusBarDebuggingBackground": "#CCFFFF"
}

[bpasero]

@psuedosudo thanks, maybe you could add this to #23506 where we already collect missing elements. We are well aware of some, since we have not adopted all widgets yet (e.g. like the tree/list widget that is pretty much everywhere).

@equinusocio no, the list of colors is larger. Once you open intellisense in settings you will see all:

[equinusocio]

@bpasero Ah nice work! There will be a documentation section about that API?

[bpasero]

Yes, we are just wrapping up for the March release and plan to document theming soon. We still expect many changes to the theming API though (color keys) during April.

[equinusocio]

Oks! Thank you!

[ghost]

I'm very excited about this. Are we going to be able to change the text color/format of tabs via extensions?

[equinusocio]

@bpasero How we can define settings inside the extension? there is a place to put the colors settings? I have a textmate theme, not a json schema

[pouyakary]

Thanks a lot for the new update, We all wanted for this so much ❤️

One thing: As I mentioned in #21938 it would be really really cool if the activity bar could be themed light. And the problem still exists because the icons remain white:

[flying-sheep]

for themeable icons, i suggest to adapt KDE’s approach

(and please no slight modification of it, it would be amazing if something in the software would would be actually compatible for once)

[aeschli]

@flying-sheep Thanks for the link, didn't know that trick!

[flying-sheep]

idk if it’s a trick, but the idea is of course to replace the <style id="current-color-scheme"> with the right color definitions, see here

[pouyakary]

@flying-sheep what a nice system!

[d-akara]

Are the plans to be able to customize the search results view?
I would very much like to customize coloring of file names, folders, result highlighting etc.

[patrik-martinko]

It would be nice to change:

• the color and transparency of scrollbars
• the color of titlebar on Windows

[bpasero]

Support for theming the workbench has landed for April release (1.12.x) and is documented in our release notes: https://code.visualstudio.com/updates/v1_12#_workbench-theming

We close this issue and reference other related issues that were mentioned in discussions in this issue as follow up:

• Theming for Font, spacing, images, borders, etc. (More workbench theme options : Typography, borders, padding/Spacing, UI icons #23475)
• Font as setting (Allow to change the font size and font of the workbench #519)
• Custom titlebar on windows (Allow to change the background color of menu bar (Windows & some Linux) #16363)
• Separate syntax and workbench theme ([theming] Separate workbench theme and syntax theme #25986)

We still plan to add more components that are themable as we see fit and requests for.