Add an option to supply token mapping as an input

[dempfi]

Suggestion

Current theme mappings sometimes don't make sense and are really hard to predict to tweak the theme. I basically modify the source JSON, then regenerate the theme, then try to work out what was affected, and then try to find a way to make things work.

For example in this screenshot titleBar.activeBackground is set to red and as you can see it affects many things. Some of which I don't want it to affect and some which it doesn't affect I want it to affect.

What could be done? The ideal scenario for me would be to not modify the source JSON and instead to modify the mapping and supply it as an input. That way I could fine-tune the output and get something that would feel natural to VS and still true to the theme.

Environment (please complete the following information):

• Converter version: v0.0.2
• VS version: 17.0.0 Preview 3.1
• Theme used: ayu

Impact This could tremendously speed up things and allow for things that are not possible with the auto conversion.

[dempfi]

I modified the theme converter to take a custom mapping parameter. With that, I was able to get something that starts to look like something. But for that, I had to spend some time working out what some of VS tokens stand for (e.g. Environment&DocWellOverflowButtonMouseDownGlyph&Background). I was mostly successful but couldn't figure some tokens e.g. breadcrumb bar appearance tokens). I also noticed that mapping is incomplete — it doesn't contain all VS tokens. I'd appreciate it if you could share a list of all tokens with short comments on what they are used for when that's not obvious from the name.

[gracegtaylor]

@dempfi Thanks so much for sharing your detailed feedback in this issue. I can understand that it's tough to tweak the theme after the conversion process. The initial conversion tool was scoped as an auto-conversion and the initial scenario was intended to optimize the conversion process.

Modifying the JSON is creative and can also be tedious. Visual Studio has a wide range of tokens that don't map 1:1 so it can be tough to put together which tokens are mapped.

We currently don't have a source-of-truth list of tokens, but there may be ways to make the token identification process a little easier. There is a tool called Snoop which we used to identify which token is used for a UI component when building the converter, which could be helpful for this process.

One of our next steps is to investigate how to make custom theming easier, and so your feedback for the conversion process is really helpful.

Do you think that after applying some of these tweaks in the second screenshot, that the theme is currently ready to publish to the Marketplace, or are there specific elements about the conversion that are blocking the publish?

cc @ketttY @nestevez @huguesv @jekelly

[dempfi]

Thank you, @gracegtaylor for sharing snoop. I understand that the tool was meant for autoconversion only but once I saw the result of conversion I concluded that just automated conversion won't cut it. There is unique design philosophy to VS which doesn't map 1:1 to VSCode. That makes it extremely hard (impossible?) to port automatically something that works in VSCode to work well in VS. I had a similar experience when ported ayu from Sublime to VSCode with automated conversion.

The theme is not ready yet — there are small details here and there that didn't have or were hard for me to guess the tokens for. Thank you for sharing snoop, with that I should get the theme to look and feel great in no time.

[gracegtaylor]

That makes sense, there are a lot of nuances that the conversion tool doesn't touch, and the design philosophies can be different between editors. I can understand that porting from Sublime to VS Code could also surface errors.

Thank you for sharing your insight, @dempfi. Do you mind sharing with us the elements you need tokens for so we can look into how we may address these elements in the converter? Screenshots could be helpful for us to understand. We may have some ideas around how to make tweaking the theme easier as well. We have some theme designers from previous versions of Visual Studio that could be upgraded. We also recently became aware of this tool called Carnation, which could be helpful for identifying syntax.

[dempfi]

Awesome, thank you @gracegtaylor for Carnation. With snoop, I was able to get almost all element tokens with the exception of a couple in the screenshot.

[dempfi]

I also couldn't figure the all minimap tokens. Would appreciate help with that as well

[gracegtaylor]

Hi @dempfi, thanks for sharing these screenshots! I'm glad you were able to find most of the tokens you were looking for. Those remaining ones are a little tricky, but @ketttY has experience with some of the obscure tokens and may be able to help identify them.

[ketttY]

Hi @dempfi, below are what I have found. Feel free to take a look and let us know if you have more questions or some of the tokens did not act as expected. Thank you! Scrollbar corner: Text Editor MEF Items&OverviewMarginScrollButtons&Background

Editor Fold lines: Text Editor MEF Items&outlining.verticalrule&Foreground

Drowdown Shadow: Environment&DropShadowBackground&Background

Minimap: colors used are under Text Editor MEF Items&OverView*. (I am also working on improving the mapping for the minimap)