Display image depending on application theme (Dark/light theme)

Question

I am develop an UWP app, and I am using template10. I have two images, one white and other black. I want show black image in light theme, and white image in dark theme. I have this code:

if (this.RequestedTheme == ElementTheme.Light)
    Image.Source = new BitmapImage(new Uri("ms-appx:///Assets/BlackImage.png"));
else
    Image.Source = new BitmapImage(new Uri("ms-appx:///Assets/WhiteImage.png"));

But, when I choose light theme image dont appear! But when I choose dark theme, white image appears.

For sure this code works because I have used it in my app. Also, If you have any problem with this code then comment it on this answer. Don't create a new post to say that the answer is not working. — Vijay Nirmal
Make sure the asset is actually where you expect it to be, did you confirm that the black image is there? — Ron
What is this? Is it Application? Or Page? Also are you using this in Initialization? or Button Click? — AVK

Jayden Jayden · Accepted Answer · 2017-06-23T06:17:17

If we do not set the ElementTheme.Light or ElementTheme.Dark to the FrameworkElement.RequestedTheme, it will always return the ElementTheme.Default. So your Image will be set with WhiteImage, no matter the ApplicationTheme is Light.

The RequestedTheme in app that can gets or sets a value that determines the light-dark preference for the overall theme of an app. It returns ApplicationTheme of the enumeration. It includes Light and Dark. We should be able to use App.Current.RequestedTheme to get the current ApplicationTheme of the App.

For example:

var AppRequestedTheme = App.Current.RequestedTheme.ToString();
if (AppRequestedTheme == "Light")
    Image.Source = new BitmapImage(new Uri("ms-appx:///Assets/BlackImage.png"));
else
    Image.Source = new BitmapImage(new Uri("ms-appx:///Assets/WhiteImage.png"));

Display image depending on application theme (Dark/light theme)

1 Answers