maui icon indicating copy to clipboard operation
maui copied to clipboard

Shell Flyout Background on Android doesn't respect theme color - makes menu and flyout items unreadable

Open biozal opened this issue 1 year ago • 3 comments

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

  1. Set your Android theme to "Dark Theme" from Settings on the Android emulator.
  2. Clone the code lined above and restore packages
  3. Debug the app
  4. 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
  5. Click the Login button.
  6. Click the Overflow Menu icon (Hamburger Icon) for the Shell Flyout Menu in the upper left hand menu
  7. 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

biozal avatar Nov 30 '23 20:11 biozal

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

biozal avatar Dec 01 '23 15:12 biozal

Same issue here!

Saccomani avatar Feb 23 '24 02:02 Saccomani

Verified this issue with Visual Studio 17.10.0 Preview 3 (8.0.20). Can not repro this issue on Android platform. Screenshot 2024-04-16 150020

kevinxufei avatar Apr 16 '24 07:04 kevinxufei