UWP – Use black logo in Light Mode

Your app

When running your UWP app with the brand spanking new Light mode (or a high-contrast mode) you’ve probably noticed that your app logo will be shown inside a coloured plate.

First party apps

But how are all these first party-apps able to show a nice black version of their logo? Luckily, this is easier to accomplish than you might think.

First of all, you’ll need to get a black version and a white version of your app logo. You can do this with a custom coloured logo as well.

Open up your app in Visual Studio and remove your current logos; we are going to replace those anyway. To keep things tidy, create a subfolder inside ‘Assets’ called ‘Logo’. Inside ‘Logo’ we will create another three subfolders:

  • contrast-black                 > Use the white logo
  • contrast-standard          > Use the white logo
  • contrast-white                > Use the black logo

The ‘contrast-black’ and ‘contrast-standard’ will house the classic white coloured logo, while the ‘contrast-white’ will house the new black logo for Light-mode.

Simply add the logos in the correct folders with the Visual Assets manager and if you’ve done it right it should look like this:

That’s it, if you now run the app it’ll show the correct logo (black or white) in the taskbar depending on your current Windows Theme and/or high-contrast settings.

You can check out a sample over here: https://github.com/ikarago/DEMO-LightDarkLogo

Happy coding! 😊