Question

I use below code to set up button background image using a png file with white image.

ImageBrush brush = new ImageBrush();    

brush.ImageSource = new BitmapImage(new Uri(@"/Images/delete.png", UriKind.Relative));     

btnDel.Background = brush;

The png file has a white image. In the Dark Theme, I can see the white image from the png file. But when I change the Theme to Light, I can no longer see the white image.

Do I need to detect the theme being set by the user then use another png file with a black image?

Answer 1

I wrote up a blog post a while back that included a custom ResourceDictionary implementation that supports swapping between two ResourceDictionaries depending on the theme.

It works with the Visual Studio designer (Cider) and Blend but it doesn’t swap to light when using that preview mechanism in Blend. Unfortunately, due to how Blend processes resources, it looks like it’s going to remain that way for the foreseeable future.

You can read the original post for additional information, but I’ll include the code here:

namespace ThemeManagement {
    /// <summary>
    /// Provides automatic selection of resources based on the current theme
    /// </summary>
    public class ThemeResourceDictionary : ResourceDictionary
    {
        private ResourceDictionary lightResources;
        private ResourceDictionary darkResources;

        /// <summary>
        /// Gets or sets the <see cref="ResourceDictioary"/> to use 
        /// when in the "light" theme
        /// </summary>
        public ResourceDictionary LightResources
        {
            get { return lightResources; }
            set
            {
                lightResources = value;

                if (!IsDarkTheme && value != null)
                {
                    MergedDictionaries.Add(value);
                }
            }
        }

        /// <summary>
        /// Gets or sets the <see cref="ResourceDictioary"/> to use 
        /// when in the "dark" theme
        /// </summary>
        public ResourceDictionary DarkResources
        {
            get { return darkResources; }
            set
            {
                darkResources = value;

                if (IsDarkTheme && value != null)
                {
                    MergedDictionaries.Add(value);
                }
            }
        }

        /// <summary>
        /// Determines if the application is running in the dark theme
        /// </summary>
        private bool IsDarkTheme
        {
            get
            {
                if (IsDesignMode)
                {
                    return true;
                }
                else
                {
                    return (Visibility)Application.Current
                        .Resources["PhoneDarkThemeVisibility"] == Visibility.Visible;
                }
            }
        }

        /// <summary>
        /// Determines if the application is being run by a design tool
        /// </summary>
        private bool IsDesignMode
        {
            get
            {
                // VisualStudio sometimes returns false for DesignMode, 
                // DesignTool is our backup
                return DesignerProperties.GetIsInDesignMode(this) ||
                    DesignerProperties.IsInDesignTool;
            }
        }
    }
}

You can then define light/dark specific resources like this (or you can put them in their own resource XAML file):

<Application.Resources>
    <custom:ThemeResourceDictionary>
        <custom:ThemeResourceDictionary.LightResources>
            <ResourceDictionary>
                <BitmapImage x:Key="ThemedImage"
                    UriSource="/ThemeManagement;component/Content/ImageLight.png" />
            </ResourceDictionary>
        </custom:ThemeResourceDictionary.LightResources>
        <custom:ThemeResourceDictionary.DarkResources>
            <ResourceDictionary>
                <BitmapImage x:Key="ThemedImage"
                    UriSource="/ThemeManagement;component/Content/ImageDark.png" />
            </ResourceDictionary>
        </custom:ThemeResourceDictionary.DarkResources>
    </custom:ThemeResourceDictionary>
</Application.Resources>

You can then reference them on your page like this:

<Image Source="{StaticResource ThemedImage}" />