Skip to content

Shell with FlyoutBackgroundColor looks weird on Windows #32067

@heikow10

Description

@heikow10

Description

The Flyout menu looks buggy or inconsistent in Windows apps when FlyoutBackgroundColor is set to certain colors.

This becomes especially noticeable when creating an app that does not support Light and Dark mode. In such a case, the app should appear consistently, regardless of the Windows system theme.

However, the color of the burger button and the title text automatically changes based on the Windows system theme. This can result in low contrast or hard-to-read text when FlyoutBackgroundColor is customized.

The problem becomes even more apparent when a FlyoutHeader with a different background color is defined — the background color appears visually interrupted by the header area.
It’s unclear whether the title row of the Flyout should inherit the FlyoutBackgroundColor or not.

Image With the customized colors it looks good in Dark Mode, Image But it looks stupid in Light Mode,

Steps to Reproduce

  1. create new .NET MAUI App
  2. remove all Styles and Colors
  3. add at least one ShellContent item in Shell
  4. set Shell.BackgroundColor, Shell.TitleColor and FlyoutBackgroundColor of the Shell
  5. define a FlyoutHeader

Link to public reproduction project repository

https://github.com/heikow10/MAUIFlyoutBackgroundColorBug

Version with bug

9.0.111 SR11.1

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

No response

Affected platforms

Windows

Affected platform versions

Windows SDK 10.0.19041.0

Did you find any workaround?

no workaround known so far

Relevant log output

Metadata

Metadata

Assignees

No one assigned

    Labels

    area-controls-shellShell Navigation, Routes, Tabs, Flyoutplatform/windowss/triagedIssue has been revieweds/verifiedVerified / Reproducible Issue ready for Engineering Triageshell-flyoutt/bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions