WinUI 3 NavigationView always uses background color from operating system, not from the selected app theme

Question

I am using WinUI 3 with Microsoft App SDK version 1.0.1.

I have issues with the background color of an NavigationView ( MSDN - NavigationView ) element I use for the main navigation.

The problem is that the background color of the NavigationView is always the background color of the windows setting (I use windows 10), ie the background color is dark in "dark mode" or white / light gray in "light mode" independently from the setting / theme I use in the app itself.

In the app, I have a small menu to switch themes, with the settings "light", "dark" or "use windows setting".

If I use a "light" setting in windows and change the theme within the app from "light" to "dark" all elements of my app change colors correclty (ie use a dark background and a light foreground color), except the background if the NavigationView which keeps its "light" background in that case. Interestingly the foreground color of the font does change in that case from dark to light, which causes the NavigationView to have "light" background color and "light" foreground color.

If the windows setting is "dark", the NavigationView has a always dark background color, no matter if I change the app theme to "light" or not.

This is my main window with the NavigationView in the top section (I removed the parts that are not relevant):

<Window>
    <Grid x:Name="Root" x:FieldModifier="Internal">

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <!-- https://learn.microsoft.com/en-us/windows/apps/design/controls/navigationview -->
        <NavigationView x:Name="navigationView" PaneDisplayMode="Top" 
                        IsBackEnabled="True" IsBackButtonVisible="Collapsed" BackRequested="NavigationView_OnBackRequested"
                        SelectionChanged="NavigationView_OnSelectionChanged"
        >
        <NavigationView.MenuItems>
            <NavigationViewItem  Content="A" />
            <NavigationViewItem  Content="B" />
            <NavigationViewItem  Content="C" />
        </NavigationView.MenuItems>

    </NavigationView>


    </Grid>
</Window>

This is the code I use in my app to set the theme:

    public async Task SetThemeAsync(ElementTheme theme)
    {
        _rootElement.RequestedTheme = theme;
    }

The _rootElement points to App.NavigationRootWindow.Root. Please note the the Grid in my XAML code above has sets x:Name="Root" . So the _rootElement where I apply the theme is the Grid of my main window.

Does anyone know why the background color of the NavigationView is not changed correctly as I described above? Thank you for your time.

Answer 1

Based on this issue: Change theme programmatically in WinUI 3 preview 3 desktop application , you could set the Background property on the root element like this:

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}

The root element is the Grid with the x:Name="Root" in case of the question.