[theme] inspect tool for workbench colors

[chpxu]

Issue Type: Feature Request Relevant Issues: There was one but I'm unable to find it, this is an idea to perhaps explore it. Maybe the bot can find it.

Live Editor Theming

The original issue puts forward the idea of live editing a theme, such that when a change is applied, it's applied automatically without reloads and allows the developee to see what exactly changed. There are still a few downsides that I feel this feature request would solve. But before I explain, I'll describe my idea to push it further.

Idea In-depth

My plan is to perhaps be able to have a 'Theme Dev Mode' of some sorts where the editor is put into a 'frozen' state (by this, I don't mean a 'Not Responding' state, but rather you can't type, UI actions don't do anything but are toggleable, basically a disabled state) and devs are able to click on various UI elements or scopes to open a pop up detailing all the possible relevant scopes that can be defined.

This is similar to the current Developer: Inspect TM Scopes but adds in support for UI too, and would be part of the 'live' experience

How would this benefit developers

The original issue stated that it would help theme developers (the live theme idea in general), and I believe this notion. would. boost the efficiency further. Currently many devs probably go to the docs to find their relevant UI scope, but this could be made easier as the pop ups detailed here could also be powered by docs.

Issues this specific idea would solve

(relating to this idea, not necessarily the original issue)

• Time consumed searching for scopes
• Much more friendly towards new devs

Cons:

• May be hard to implement, though the 'disabled' state is one thatvs started groundwork in the Walkthrough on the Welcome page

[aeschli]

How do you edit the colors in the theme? Currently, if you modify the colors it in the settings file (workbench.colorCustomizations), you get live updates.

[chpxu]

This issue is more based on efficiency. Assume someone who doesn't know any ui/editor scopes and wants to make a theme. They'd probably look at docs reference right? However my idea is to combine the docs into VSCode such that there is a separate "theme editor" mode which is interactive, meaning that users can click on any part of the UI and get all the possible scopes which would be powered by info from the docs. When I was making my now released theme, sometimes I found it hard to see what was wrong. There's tabs.* but then editorGroupTab.* that I had to memorise. My goal is to simplify it into one UX

[aeschli]

Ok, I see, it's more about discovering which color is used where.

[chpxu]

Yh essentially, and perhaps a setting where editing colours using this interactive view could also edit it in settings.json

Or maybe it could have a .vscodecolor (just a random name) which could be imported by settings.json?