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
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:
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.
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.
The example source code for this article is available on my GitHub.
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 🙂 .