Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
biozal opened this issue Nov 30, 2023 · 3 comments
Labels
area-controls-shell Shell Navigation, Routes, Tabs, Flyout platform/android 🤖 s/triaged Issue has been reviewed s/try-latest-version Please try to reproduce the potential issue on the latest public version t/bug Something isn't working

Comments

@biozal
Copy link

biozal commented Nov 30, 2023

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:

Shell-Theming-Bug.mp4

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
Copy link
Author

biozal commented Dec 1, 2023

Added Issue for documentation team because this bug is worse when you use the Documentation provided for the Shell Flyout:
dotnet/docs-maui#1928

@Eilon Eilon added the area-controls-shell Shell Navigation, Routes, Tabs, Flyout label Dec 2, 2023
@Saccomani
Copy link

Same issue here!

@kevinxufei
Copy link
Collaborator

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 kevinxufei added s/triaged Issue has been reviewed s/try-latest-version Please try to reproduce the potential issue on the latest public version labels Apr 16, 2024
@github-actions github-actions bot locked and limited conversation to collaborators May 25, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area-controls-shell Shell Navigation, Routes, Tabs, Flyout platform/android 🤖 s/triaged Issue has been reviewed s/try-latest-version Please try to reproduce the potential issue on the latest public version t/bug Something isn't working
Projects
None yet
Development

No branches or pull requests

5 participants