UWP Template10 - Change button background color when changing theme

Question

I have a number of buttons in a UWP template10 project, and I was looking to automatically change the button background color, when switching to either light or dark theme.

I went into my custom.xaml, and added the last 5 lines:

<ResourceDictionary.ThemeDictionaries>

    <ResourceDictionary x:Key="Light">

        <SolidColorBrush x:Key="CustomColorBrush" Color="{ThemeResource CustomColor}" />
        <SolidColorBrush x:Key="ContrastColorBrush" Color="{ThemeResource ContrastColor}" />
        <SolidColorBrush x:Key="ExtendedSplashBackground" Color="{ThemeResource CustomColor}" />
        <SolidColorBrush x:Key="ExtendedSplashForeground" Color="{ThemeResource ContrastColor}" />

        <Style TargetType="controls:PageHeader">
            <Setter Property="Background" Value="{ThemeResource CustomColorBrush}" />
            <Setter Property="Foreground" Value="{ThemeResource ContrastColorBrush}" />
        </Style>

        <!-- Change button background-->
        <Style TargetType="Button">
            <Setter Property="Background" Value="{ThemeResource CustomColorBrush}" />
            <Setter Property="Foreground" Value="{ThemeResource ContrastColorBrush}" />
        </Style>

    </ResourceDictionary>
....

However this does not work. Would anyone be able to suggest on how / where to do this?

Answer 1

If your Styles and SolidColorBrushs can be used for your control when you first run the app? If not, please try to remove the RequestedTheme="Dark" in the App.xaml.

Also if you create the ResourceDictionary with "Default" as the key, it will not change the color when the theme has changed. You should be able to specify theme dictionaries for both "Light" and "Dark" in addition to your "HighContrast" dictionary.

For example:

In App.xaml:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="CustomColor" Color="Orange" />
            </ResourceDictionary>
            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush x:Key="CustomColor" Color="Blue" />
            </ResourceDictionary>
            <ResourceDictionary x:Key="HighContrast">
                <SolidColorBrush x:Key="CustomColor" Color="Green" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>

Also you should be add the specify theme dictionaries for both "Light", "Dark" and "HighContrast" in the dictionary in your custom.xaml.

In the custom.xaml:

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="CustomColorBrush" Color="{ThemeResource CustomColor}" />
                <SolidColorBrush x:Key="ContrastColorBrush" Color="{ThemeResource ContrastColor}" />
                <SolidColorBrush x:Key="ExtendedSplashBackground" Color="{ThemeResource CustomColor}" />
                <SolidColorBrush x:Key="ExtendedSplashForeground" Color="{ThemeResource ContrastColor}" />
                <Style TargetType="controls:PageHeader">
                    <Setter Property="Background" Value="{ThemeResource CustomColorBrush}" />
                    <Setter Property="Foreground" Value="{ThemeResource ContrastColorBrush}" />
                </Style>
                <Style TargetType="Button">
                    <Setter Property="Background" Value="{ThemeResource CustomColorBrush}" />
                    <Setter Property="Foreground" Value="{ThemeResource ContrastColorBrush}" />
                </Style>
            </ResourceDictionary>
            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush x:Key="CustomColorBrush" Color="{ThemeResource CustomColor}" />
                <SolidColorBrush x:Key="ContrastColorBrush" Color="{ThemeResource ContrastColor}" />
                <SolidColorBrush x:Key="ExtendedSplashBackground" Color="{ThemeResource CustomColor}" />
                <SolidColorBrush x:Key="ExtendedSplashForeground" Color="{ThemeResource ContrastColor}" />
                <Style TargetType="controls:PageHeader">
                    <Setter Property="Background" Value="{ThemeResource CustomColorBrush}" />
                    <Setter Property="Foreground" Value="{ThemeResource ContrastColorBrush}" />
                </Style>
                <Style TargetType="Button">
                    <Setter Property="Background" Value="{ThemeResource CustomColorBrush}" />
                    <Setter Property="Foreground" Value="{ThemeResource ContrastColorBrush}" />
                </Style>
            </ResourceDictionary>
            <ResourceDictionary x:Key="HighContrast">
                <SolidColorBrush x:Key="CustomColorBrush" Color="{ThemeResource CustomColor}" />
                <SolidColorBrush x:Key="ContrastColorBrush" Color="{ThemeResource ContrastColor}" />
                <SolidColorBrush x:Key="ExtendedSplashBackground" Color="{ThemeResource CustomColor}" />
                <SolidColorBrush x:Key="ExtendedSplashForeground" Color="{ThemeResource ContrastColor}" />
                <Style TargetType="controls:PageHeader">
                    <Setter Property="Background" Value="{ThemeResource CustomColorBrush}" />
                    <Setter Property="Foreground" Value="{ThemeResource ContrastColorBrush}" />
                </Style>
                <Style TargetType="Button">
                    <Setter Property="Background" Value="{ThemeResource CustomColorBrush}" />
                    <Setter Property="Foreground" Value="{ThemeResource ContrastColorBrush}" />
                </Style>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>