If you are developing a Visual Studio extension, you will probably encounter the EnvironmentColors class which contains many static properties defining the colour of elements in Visual Studio’s UI.
For example to specify a Border element’s BorderBrush;
<Border x:Name="SubMenuBorder" BorderBrush="{DynamicResource {x:Static vs_shell:EnvironmentColors.AccentBorderBrushKey}}" BorderThickness="1" Padding="0">
where ‘vs_shell’ is defined in the Window or UserControl
xmlns:vs_shell="clr-namespace:Microsoft.VisualStudio.PlatformUI;
assembly=Microsoft.VisualStudio.Shell.11.0"
This gives the border the same colour/brush as VS uses for it’s elements with AccentBorderBrushKey, whatever colour that happens to be.
Naturally the question arises, what is that colour? It does depend on the user’s selected theme, but still it would be nice to see what the colours of each property in EnvironmentColors correspond to, with each theme.
So we wrote some code to iterate the properties and output a swatch palette. The only problem, there’s hundreds of properties and 4 themes (we opted to skip the Blue High Contrast because the image was becoming unwieldy, sorry about that if you need it – you can let us know and we’ll generate one and upload it here).
How to use it
Click the image above, and it will download the 2MB file, hopefully you can zoom out in your browser enough to take a good selection in at once. The first 4 columns are “Dark” theme, the next 4 are “Light” and the final 4 columns are “Blue”. I suggest that you find a colour that you want to use for your (let’s say) ‘primary’ theme, and then compare it against the corresponding colour in the other themes, to get an idea of how it will look. You can zoom in enough to see the actual name of the colour underneath the rectangle. Please note that some of the elements appear to be present in specific versions only, you can check EnvironmentColors by clicking on the property name to see version info.
You will notice that there are a lot of duplicates, I’d suggest that it would be best to find one whose name most closely fits your element, if possible, because future versions of VS may change these colours and it would be better to fit inline with the broader IDE. The EnvironmentColors class has properties names XYZBrushKey and XYZColorKey, which both have the same colour.
- Do the Log4j vulnerabilities affect Keyoti products? - December 14, 2021
- Visual of the actual colours in Visual Studio’s EnvironmentColors - May 11, 2018
- Open up Visual Studio web projects for access over the internet using Conveyor. - March 1, 2018
Hi, great work. Thanks.
Can you make it as a web page with colours searchable by name, please?
Yes that would be nice but honestly I don’t have time to do it. If you would like the code I can share it.