1.4 preview: Flyout backdrop theme is derived from system theme and not from its associated element

[lhak]

Describe the bug

The background of flyouts in 1.4 preview 1/2 is derived from the system theme instead of the theme of the associated element like the reset of the flyout:

Steps to reproduce the bug

1. Create a new winui project (1.4 preview 1/2) and use the following xaml:

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" RequestedTheme="Dark">
    <Button x:Name="myButton" HorizontalAlignment="Center">
        <Button.Flyout>
            <MenuFlyout>
                <MenuFlyoutItem Text="Test" />
            </MenuFlyout>
        </Button.Flyout>
        Click Me
    </Button>
</Grid>

2. Open the app when the system mode is set to light theme and open the flyout

Expected behavior

The flyout should have a dark theme backdrop

Screenshots

No response

NuGet package version

WinUI 3 - Windows App SDK 1.4 Preview 1: 1.4.230628000-preview1

Windows version

Windows 11 (22H2): Build 22621

Additional context

No response

[AdriaanLarcai]

The workaround for this is to either override the style for FlyoutPresenter and any other derivative controls such as the MenuFlyoutPresenter in your app's style resource dictionaries, like this:

  <Style TargetType="FlyoutPresenter">
      <Setter Property="Background" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
      <Setter Property="BorderBrush" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
  </Style>

  <Style TargetType="MenuFlyoutPresenter">
      <Setter Property="Background" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
      <Setter Property="BorderBrush" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
  </Style>

Or by overriding the respective brush resources, like so:

<StaticResource x:Key="FlyoutPresenterBackground" ResourceKey="ApplicationPageBackgroundThemeBrush" />
<StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="ApplicationPageBackgroundThemeBrush" />

[DHancock]

Thanks. That's much simpler than the workaround I'd implemented. I did change the brushes though:

    <Style TargetType="MenuFlyoutPresenter" BasedOn="{StaticResource DefaultMenuFlyoutPresenterStyle}">
        <Setter Property="Background" Value="{ThemeResource FlyoutPresenterBackground}"/>
        <Setter Property="BorderBrush" Value="{ThemeResource FlyoutBorderThemeBrush}"/>
    </Style>

[DHancock]

Ugh. The workaround above works fine for when the window's root layout element's RequestedTheme is specifically set to either Light or Dark when the theme is changed via my apps settings, however it doesn't work if the RequestedTheme is ElementTheme.Default and the user changes the systems app preferred theme mode (Personalization->Colors->Choose your default app mode). The flyouts will again have the wrong background, extra code is required.

My app has a single window and the theme mode is saved in the settings. This allows it to always set the RequestedTheme to be either Light or Dark even when the settings indicate use of the ElementTheme.Default theme. I do this in the Window's Activated event handler:

  Activated += (s, e) =>
  {
      if (rootViewModel.SettingsViewModel.SelectedTheme == ElementTheme.Default)
      {
          if (e.WindowActivationState == WindowActivationState.Deactivated)
          {
              // allows any system theme changes to be shown while in the background (flyouts will have been closed)
              LayoutRoot.RequestedTheme = ElementTheme.Default;
          }
          else
          {
              // force the requested theme to always be either light or dark so that flyouts can pick up the correct colors
              LayoutRoot.RequestedTheme = Application.Current.RequestedTheme == ApplicationTheme.Light ? ElementTheme.Light : ElementTheme.Dark;
          }
      }
  };

[krschau]

@bpulliam Dev Home would love if this could get fixed sooner rather than later. We're itching to move up to 1.4 so that we can use the new widget interfaces.

[codendone]

There is a fix for this in 1.4.230913002.

[LucaCris]

There is a fix for this in 1.4.230913002.

Nope:

My extra added things are ok (Light), but system specific items get app theme, not element theme.

[codendone]

@LucaCris Please open a new issue providing more information on your scenario. The available fix is for MenuFlyout and CommandBarFlyoutCommandBar. There may be additional work required for other controls or custom styling of those controls.

[LucaCris]

My scenario is complex, @codendone ... A Dark frame of controls with inside a Light canvas viewer.

1.3 result is correct:

No time to create a dummy project now.

[codendone]

@LucaCris Is this a CommandBarFlyoutCommandBar? Do you have custom style defined for it? If you do, try adding this to its style definition:

    <Setter Property="SystemBackdrop" Value="{StaticResource CommandBarFlyoutSystemBackdrop}" />

[LucaCris]

@LucaCris Is this a CommandBarFlyoutCommandBar? Do you have custom style defined for it? If you do, try adding this to its style definition:

    <Setter Property="SystemBackdrop" Value="{StaticResource CommandBarFlyoutSystemBackdrop}" />

No styles for me. And a similar problem is also present in latest WinUI Gallery App...

(try doing Light/Dark combinations).

[LucaCris]

Upgraded to latest AppSDK: unresolved.

Light RichEditBox inside Dark app:

Standard TextBox dark menu:

[LucaCris]

@LucaCris Is this a CommandBarFlyoutCommandBar? Do you have custom style defined for it?

Fixed with:

        <Style TargetType="CommandBarFlyoutCommandBar">
            <Setter Property="RequestedTheme" Value="Dark" />
        </Style>

Now it is dark, but correctly dark:

(light doesn't work)