Shell with FlyoutBackgroundColor looks weird on Windows
- Dominant language
- C#
- Stars
- 23.3k
- Forks
- 2k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 290
Description
### 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.
With the customized colors it looks good in Dark Mode,
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
```shell
```
Contributor guide
Research direction
Start by running the linked MAUIFlyoutBackgroundColorBug reproduction on Windows and follow the listed steps with both Light and Dark system themes. Compare the Shell title, burger button, FlyoutBackgroundColor, and FlyoutHeader appearance; done requires an agreed, consistent result with readable contrast when custom colors are used.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- csharp
- Domain
- desktop, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100