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.
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! 😊