Template 10 HamburgerMenu and PageHeader background color

Question

Using the Live Property Explorer I can see the background colour of the HamburgerMenu control is DimGray or #FF2B2B2B depending on the Light/Dark theme selection but where do those colours inherit their value from please?

I would like to use those same colours for the PageHeader background colour rather than the CustomColor (which is SteelBlue by default in the template).

In the Custom.xaml resource dictionary, if I comment out the style targeting the PageHeader control in the "Light" resource dictionary that almost has my desired effect on the right section of the header but not on the Hamburger header.

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

Answer 1

The colors for the background of the navigation area aren't inherited but coded like this in Template10. The name of the property is NavAreaBackground and the definition in the source can be seen here.

If you want to change this color, you could go for a style definition something like

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Light">
        <Style TargetType="controls:HamburgerMenu" x:Key="HamburgerMenuStyle">
            <Setter Property="NavAreaBackground" 
                    Value="#FFFFFF" />
        </Style>
    </ResourceDictionary>
    <ResourceDictionary x:Key="Default">
        <Style TargetType="controls:HamburgerMenu" x:Key="HamburgerMenuStyle">
            <Setter Property="NavAreaBackground" 
                    Value="#000000" />
        </Style>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

and then reference the style in your HamburgerMenu with Style="{ThemeResource HamburgerMenuStyle}".

As for the steel blue color, this one comes from the HamburgerBackground property of the HamburgerMenu (definition of the header in the source). You can override the color in the same way I demonstrated above.

And the same for the PageHeader where you already posted the code of how to apply a color. Now just use the same color you defined for the HamburgerBackground.

Quick note: I once encountered a bug where the NavAreaBackground wasn't applied if the other style properties weren't defined in your style too. Not sure if this is still the case.