Dark/Light theme assets qualifiers

Question

I have a very simple requirement to use Light/Dark themed images. I expected that a qualifier like

SomeImage.Theme-Light.png

or putting the image under a folder named Theme-Light

Theme-Light/SomeImage.png

would work, and it did, but only in the designer mode. As soon as I run the app, even though the required theme is properly set (on both app and page level so all the other ThemeResources get loaded correctly), wrong image gets loaded.

I know about workarounds to load different images for different themes, so that's not what I'm looking for. I am curious to know why this approach with qualifiers doesn't work in runtime? Is there a different name qualifier that should be used?

I read this article: "How to name resources using qualifiers (XAML)" but it only shows how to name the assets with regards to high contrast support.

Answer 1

This aproach isn't as convenient as qualifiers, but it works.

Define in App.xaml

<ResourceDictionary>
    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Light">
            <ImageSource x:Key="Logo">/Assets/Logo-White.png</ImageSource>
        </ResourceDictionary>

        <ResourceDictionary x:Key="Dark">
            <ImageSource x:Key="Logo">/Assets/Logo-Blue.png</ImageSource>
        </ResourceDictionary>

        <ResourceDictionary x:Key="HighContrast">
            <ImageSource x:Key="Logo">/Assets/Logo-White.png</ImageSource>
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>

Then use

<Image Source="{ThemeResource Logo}"/>