dotnet / dotnet/maui

Shell with FlyoutBackgroundColor looks weird on Windows

Open
#32,067 11 comments 2 reactions 0 assignees View on GitHub
area-controls-shell platform/windows s/triaged s/verified shell-flyout t/bug
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.

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

```shell

```

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.