microsoft / theme-converter-for-vs

CLI tool that allows you to convert your VS Code color theme to a VS 2022 color theme.
MIT License
484 stars 48 forks source link

Incorrect main menu colours for inactive elements #142

Closed fwosar closed 2 years ago

fwosar commented 2 years ago

Describe the bug When attempting to convert the Dracula Pro Van Helsing theme to VS2022 using the converter I noticed that all disabled main and context menu entries are themed incorrectly.

Screenshots Here is what these entries are supposed to look like based on Visual Studio Code:

image

image

Here is what they look like in Visual Studio 2022:

image

image

To Reproduce Simply attempt to convert the theme.

Expected behavior Context and main menu items should have the correct disabled theming.

Environment (please complete the following information): Latest ThemeConverter compiled from the master branch. Visual Studio 2022

Theme is a commercial theme, but it can be reproduced with the normal freely available Dracula theme as well. In fact, the "official" conversion of Dracula that was advertised by a recent Microsoft blog post has exactly the same issue.

Impact Makes using the converted theme completely impossible as there is no way to differentiate between enabled and disabled context and main menu items unless there is a glyph or icon involved. I actually didn't notice it at first and only noticed it after I was wondering why a certain menu option wasn't working for close to 30 minutes.

Additional context The same appears to be true for the official Dracula conversions available in the store as well.

fwosar commented 2 years ago

I checked out some more themes and this appears to be a universal issue that isn't limited to one theme. In fact, in the official video announcement, you can watch it live in action. Just pay attention to the context menu and the Copy, Cut, and Paste entries in particular.

I am genuinely surprised that seemingly nobody noticed this before.

fwosar commented 2 years ago

After doing some digging it turns out that Visual Studio Code uses opacity (0.4) to "grey out" inactive entries within the context and main menus, so there isn't a dedicated colour that could be converted. Therefore, the fix would probably involve setting the correct opacities for things like Environment/CommandBarTextInactive (and potentially other similar cases). In fact, after editing the theme manually and setting the opacity byte to 0x66, which is approximately 40%, the menus appear to be correct:

image

While making manual edits like that is certainly possible, even if not very straightforward, it would probably not be too difficult to just apply the opacity for this and similar elements automatically during the conversion.

ketttY commented 2 years ago

Hi @fwosar, thank you so much for your feedback! We will look into this issue and let you know once we have a fix for it!