xaml - Configuring overlay background colour for ContentDialog

Question

I'm writing an app for the universal windows platform using the dark theme and I've noticed that although I've correctly set the requested theme to dark when I display a modal dialog using the ContentDialog class the overlay lightens the overall page rather than darkening it.

Before dialog displayed:

With dialog displayed:

Since there isn't a property on ContentDialog to control the overlay how do I override the colour being used?

Answer 1

After some experimentation I've found that the brush being used to control the colour of the overlay that a ContentDialog is displayed above is SystemControlPageBackgroundBaseMediumBrushrather than the more likely looking ContentDialogDimmingThemeBrush.

By inspecting the default theme definitions it emerges that both light and dark themes set this brush to the colour resource SystemBaseMediumColor which on the light theme is #99000000 and on the dark theme is #99FFFFFF. This results in the overlay darkening the light theme and lightening the dark theme.

Since SystemBaseMediumColor is references by other brush definitions such as those used for inactive pivot titles it's necessary to override SystemControlPageBackgroundBaseMediumBrush rather than the colour it references solely for the dark theme.

To do this we need to redefine the brush in a resource theme dictionary in App.xaml or in a resource XAML file merged into App.xamlalong the lines of:

<Application>

    <Application.Resources>

        <ResourceDictionary>

            <ResourceDictionary.ThemeDictionaries>

                <ResourceDictionary x:Key="Dark">

                    <SolidColorBrush 
                        x:Key="SystemControlPageBackgroundBaseMediumBrush" 
                        Color="#99000000"
                        />

                </ResourceDictionary>

           </ResourceDictionary.ThemeDictionaries>

       </ResourceDictionary>

    </Application.Resources>

</Application>