maui
maui copied to clipboard
Shell Flyout Background on Android doesn't respect theme color - makes menu and flyout items unreadable
Description
When using Shell and the Flyout Menu on Android with API v33 and Dark Theme set as the theme the background color of the Flyout menu doesn't properly update to the background of black, and thus none of the Flyout Items or Menu Items are visible because the label color is the same as the background color, which is white.
Steps to Reproduce
See the code example here: https://github.com/biozal/dotnet-cblite-inventory/blob/main/src/Dotnet.Cblite.Inventory.Maui/AppShell.xaml
- Set your Android theme to "Dark Theme" from Settings on the Android emulator.
- Clone the code lined above and restore packages
- Debug the app
- When the login page opens click on the Logo icon above the username box, this will auto type in a username and password for you
- Click the Login button.
- Click the Overflow Menu icon (Hamburger Icon) for the Shell Flyout Menu in the upper left hand menu
- Notice the menu items aren't visible in Android because the background color isn't the proper background color for the mode selected (Dark Theme).
See included video below:
https://github.com/dotnet/maui/assets/80424345/434b972e-0a8b-4807-bdc0-f7d70fc201f8
Link to public reproduction project repository
https://github.com/biozal/dotnet-cblite-inventory/blob/main/src/Dotnet.Cblite.Inventory.Maui
Version with bug
8.0.3
Is this a regression from previous behavior?
Not sure, did not test other versions
Last version that worked well
Unknown/Other
Affected platforms
Android
Affected platform versions
Android API 33
Did you find any workaround?
No, in fact if I use the documentation page for this link: https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/flyout?view=net-maui-8.0#default-template-for-flyoutitems
It recommends using the AppThemeBinding to change colors in Android specifically - for example right from the docs:
<Label.TextColor>
<OnPlatform x:TypeArguments="Color">
<OnPlatform.Platforms>
<On Platform="Android"
Value="{AppThemeBinding Light=Black, Dark=White}" />
</OnPlatform.Platforms>
</OnPlatform>
</Label.TextColor>
Adding any code that uses AppThemeBinding in my code causes Android to bomb with a Typecast error - so the entire template they provide on the docs page for this doesn't work for Android specifically.
Relevant log output
No response
Added Issue for documentation team because this bug is worse when you use the Documentation provided for the Shell Flyout: https://github.com/dotnet/docs-maui/issues/1928
Same issue here!
Verified this issue with Visual Studio 17.10.0 Preview 3 (8.0.20). Can not repro this issue on Android platform.