Common Tasks

Set the theme and accent color of the app

The default theme and accent color are as follows:

• For systems running Windows 10, the system accent color is used. If the Windows version supports the "choose your default app mode" setting, this setting is used; otherwise, the light theme is used.
• For systems running an earlier version of Windows, the light theme and the color #0078D7 (default blue) are used.

To override the default settings, set properties on the ThemeResources class in App.xaml. For example:

<ui:ThemeResources RequestedTheme="Dark" AccentColor="Red" />

Values set this way are applied at both design time and runtime. However, changing them after the app has started takes no effect, nor do they support data binding. To change the theme and accent color at runtime, set properties on the ThemeManager class. For example:

private void Button_Click(object sender, RoutedEventArgs e)
{
    ThemeManager.Current.ApplicationTheme = ApplicationTheme.Dark;
    ThemeManager.Current.AccentColor = Colors.Red;
}

Values set on ThemeManager will take precedence over values set on ThemeResources at runtime.

Override the theme at element level

Set the ThemeManager.RequestedTheme attached property on any FrameworkElement. For example:

<Border
    Background="{DynamicResource SystemControlBackgroundAltHighBrush}"
    Padding="12"
    ui:ThemeManager.RequestedTheme="Dark">
    <Button Content="Dark theme button" />
</Border>

Currently this feature doesn't work correctly at design time.

Override other predefined colors

Use the ColorPaletteResources class. For example, edit the ui:ThemeResources element in App.xaml to following:

<ui:ThemeResources>
    <ui:ThemeResources.ThemeDictionaries>
        <ResourceDictionary x:Key="Light">
            <ResourceDictionary.MergedDictionaries>
                <ui:ColorPaletteResources
                    TargetTheme="Light"
                    Accent="Green"
                    AltHigh="LightGray" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
        <ResourceDictionary x:Key="Dark">
            <ResourceDictionary.MergedDictionaries>
                <ui:ColorPaletteResources
                    TargetTheme="Dark"
                    Accent="Red"
                    AltHigh="DarkGray" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </ui:ThemeResources.ThemeDictionaries>
</ui:ThemeResources>

Now in the light theme, Green is used as the accent color and LightGray is used as the AltHigh color. Colors for the dark theme are set in the same way.