Supporting light theme taskbar icons in UWP

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!

Light theme taskbar icon

Example: Microsoft Store

Let’s take the Microsoft Store app as an example. In its Assets folder we find the following:

Microsoft Store Assets

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-{size}_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!):

Logo 24x24 light theme

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:

Light theme taskbar icon

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 🙂 .

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.