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?
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 SystemControlPageBackgroundBaseMediumBrush
rather 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.xaml
along 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>