The Windows 10 Insider Preview build 18282 for the first time revealed a beautiful light theme of the Windows Shell (Start menu, Taskbar and Action Center). Many stock apps have already been updated to support this color scheme so in this article, we will check out how to add support for light theme task bar icons in our UWP apps as well!
Example: Microsoft Store
Let's take the Microsoft Store app as an example. In its Assets folder we find the following:
I have previously written about the different types of app icons supported in UWP and with light theme in Windows shell there is a new addition to the list - the lightunplated suffix.
- targetsize-_altform-lightunplated
Light theme taskbar icon in action
The default UWP Blank app template already creates an altform-unplated icon for display in the taskbar.
However, the system will use the plated version when the user switches to light theme:
So if we want to have an icon with transparent background even with the light theme, we must provide a second png icon with the lightunplated suffix. Ideally, this version should be adapted to look well on light background, so using dark colors is recommended. I have used the following icon (thank you, Icons8!):
And named it Square44x44Logo.targetsize-24_altform-lightunplated.png. This is enough to get the icon picked up by the system and automatically used when light theme is set:
Sizes
In addition to providing the base size for the taskbar icon, you can also provide more sizes for different screen densities. As I described in my older article, Visual Studio shows sizes 256, 48, 24 and 16, but you can freely add even more as you see fit.
Compatibility
As mentioned, light-theme for Windows Shell was first introduced in Insider Preview build 18282, but you are free to add the lightunplated icons to your app running on any version of Windows 10 and they will just be gracefully ignored.
Source code
The example source code for this article is available on my GitHub.
Summary
The light-themed Windows Shell was long awaited and it is awesome to see it finally making its appearance in latest preview builds. Adding support for the light-theme taskbar icons is quick and easy so including them in your app is a no-brainer :-) .