🐛 [Firebase_UI_Auth] Verification message text not visible in Profile Screen due to wrong color

YarosMallorca commented 1 year ago

Bug report

Describe the bug In the Profile Screen, the email verification message is not visible in Dark Mode. My app color theme is yellow, and the background of the message is also very light colored as is the text, and it is not clearly visible.

Steps to reproduce

Steps to reproduce the behavior:

Create a flutter project
Set the flutter theme useMaterial3: true, and colorScheme to ColorScheme.fromSeed(brightness: Brightness.dark, seedColor: Colors.yellow)
Use Firebase UI Auth to Log In and then display the Profile Screen
See the rendering issue

Expected behavior

The text adapts to be always visible in any condition.

Flutter doctor

Run flutter doctor and paste the output below:

Click To Expand

``` Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 3.10.0, on Microsoft Windows [Version 10.0.22621.1702], locale es-ES) [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 33.0.2) [√] Chrome - develop for the web [√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.8.2) [√] Android Studio (version 2022.1) [√] VS Code (version 1.78.2) [√] Connected device (5 available) [√] Network resources • No issues found! ```

Flutter dependencies

Run flutter pub deps -- --style=compact and paste the output below:

Click To Expand

``` dependencies: - animated_text_kit 4.2.2 [flutter characters] - cloud_firestore 4.7.0 [cloud_firestore_platform_interface cloud_firestore_web collection firebase_core firebase_core_platform_interface flutter meta] - connectivity_plus 4.0.0 [flutter flutter_web_plugins connectivity_plus_platform_interface js meta nm] - dynamic_color 1.6.5 [flutter flutter_test material_color_utilities] - firebase_analytics 10.4.0 [firebase_analytics_platform_interface firebase_analytics_web firebase_core firebase_core_platform_interface flutter] - firebase_app_check 0.1.4 [firebase_app_check_platform_interface firebase_app_check_web firebase_core firebase_core_platform_interface flutter] - firebase_auth 4.6.0 [firebase_auth_platform_interface firebase_auth_web firebase_core firebase_core_platform_interface flutter meta] - firebase_core 2.12.0 [firebase_core_platform_interface firebase_core_web flutter meta] - firebase_crashlytics 3.3.0 [firebase_core firebase_core_platform_interface firebase_crashlytics_platform_interface flutter stack_trace] - firebase_performance 0.9.2 [firebase_core firebase_core_platform_interface firebase_performance_platform_interface firebase_performance_web flutter] - firebase_remote_config 4.2.0 [firebase_core firebase_core_platform_interface firebase_remote_config_platform_interface firebase_remote_config_web flutter] - firebase_storage 11.2.0 [firebase_core firebase_core_platform_interface firebase_storage_platform_interface firebase_storage_web flutter] - firebase_ui_auth 1.4.0 [email_validator firebase_auth firebase_core firebase_dynamic_links firebase_ui_localizations firebase_ui_oauth firebase_ui_shared flutter flutter_localizations flutter_svg] - firebase_ui_oauth_apple 1.2.0 [firebase_auth firebase_ui_oauth flutter] - firebase_ui_oauth_google 1.2.0 [firebase_auth firebase_ui_oauth flutter google_sign_in] - flutter 0.0.0 [characters collection js material_color_utilities meta vector_math sky_engine] - flutter_animate 4.1.1+1 [flutter] - flutter_localizations 0.0.0 [flutter intl characters clock collection js material_color_utilities meta path vector_math] - go_router 7.0.1 [collection flutter flutter_web_plugins logging meta] - google_fonts 4.0.4 [flutter http path_provider crypto] - google_sign_in 6.1.0 [flutter google_sign_in_android google_sign_in_ios google_sign_in_platform_interface google_sign_in_web] - provider 6.0.5 [collection flutter nested] - shared_preferences 2.1.1 [flutter shared_preferences_android shared_preferences_foundation shared_preferences_linux shared_preferences_platform_interface shared_preferences_web shared_preferences_windows] - url_launcher 6.1.11 [flutter url_launcher_android url_launcher_ios url_launcher_linux url_launcher_macos url_launcher_platform_interface url_launcher_web url_launcher_windows] dev dependencies: - dependency_validator 3.2.2 [args build_config checked_yaml glob io json_annotation logging package_config path pub_semver pubspec_parse yaml] - flutter_lints 2.0.1 [lints] - flutter_native_splash 2.2.19 [args flutter flutter_web_plugins js html image meta path universal_io xml yaml] - flutter_test 0.0.0 [flutter test_api path fake_async clock stack_trace vector_math async boolean_selector characters collection js matcher material_color_utilities meta source_span stream_channel string_scanner term_glyph] transitive dependencies: - _flutterfire_internals 1.3.0 [collection firebase_core firebase_core_platform_interface flutter meta] - archive 3.3.7 [crypto path pointycastle] - args 2.4.1 - async 2.11.0 [collection meta] - boolean_selector 2.1.1 [source_span string_scanner] - build_config 1.1.1 [checked_yaml json_annotation path pubspec_parse yaml] - characters 1.3.0 - checked_yaml 2.0.3 [json_annotation source_span yaml] - clock 1.1.1 - cloud_firestore_platform_interface 5.14.0 [_flutterfire_internals collection firebase_core flutter meta plugin_platform_interface] - cloud_firestore_web 3.5.0 [_flutterfire_internals cloud_firestore_platform_interface collection firebase_core firebase_core_web flutter flutter_web_plugins js] - collection 1.17.1 - connectivity_plus_platform_interface 1.2.4 [flutter meta plugin_platform_interface] - convert 3.1.1 [typed_data] - crypto 3.0.3 [typed_data] - csslib 0.17.2 [source_span] - dbus 0.7.8 [args ffi meta xml] - desktop_webview_auth 0.0.12 [crypto flutter http flutter_web_plugins plugin_platform_interface] - email_validator 2.1.17 - fake_async 1.3.1 [clock collection] - ffi 2.0.2 - file 6.1.4 [meta path] - firebase_analytics_platform_interface 3.6.0 [_flutterfire_internals firebase_core flutter meta plugin_platform_interface] - firebase_analytics_web 0.5.4 [_flutterfire_internals firebase_analytics_platform_interface firebase_core firebase_core_web flutter flutter_web_plugins js] - firebase_app_check_platform_interface 0.0.8 [_flutterfire_internals firebase_core flutter meta plugin_platform_interface] - firebase_app_check_web 0.0.10 [_flutterfire_internals firebase_app_check_platform_interface firebase_core firebase_core_web flutter flutter_web_plugins js] - firebase_auth_platform_interface 6.15.0 [_flutterfire_internals collection firebase_core flutter meta plugin_platform_interface] - firebase_auth_web 5.5.0 [firebase_auth_platform_interface firebase_core firebase_core_web flutter flutter_web_plugins http_parser js meta] - firebase_core_platform_interface 4.8.0 [collection flutter flutter_test meta plugin_platform_interface] - firebase_core_web 2.5.0 [firebase_core_platform_interface flutter flutter_web_plugins js meta] - firebase_crashlytics_platform_interface 3.6.0 [_flutterfire_internals collection firebase_core flutter meta plugin_platform_interface] - firebase_dynamic_links 5.3.0 [firebase_core firebase_core_platform_interface firebase_dynamic_links_platform_interface flutter meta plugin_platform_interface] - firebase_dynamic_links_platform_interface 0.2.6 [_flutterfire_internals firebase_core flutter meta plugin_platform_interface] - firebase_performance_platform_interface 0.1.4 [_flutterfire_internals firebase_core flutter plugin_platform_interface] - firebase_performance_web 0.1.4 [_flutterfire_internals firebase_core firebase_core_web firebase_performance_platform_interface flutter flutter_web_plugins js] - firebase_remote_config_platform_interface 1.4.0 [_flutterfire_internals firebase_core flutter meta plugin_platform_interface] - firebase_remote_config_web 1.4.0 [firebase_core firebase_core_web firebase_remote_config_platform_interface flutter flutter_web_plugins js] - firebase_storage_platform_interface 4.4.0 [collection firebase_core flutter meta plugin_platform_interface] - firebase_storage_web 3.6.0 [_flutterfire_internals async firebase_core firebase_core_web firebase_storage_platform_interface flutter flutter_web_plugins http js meta] - firebase_ui_localizations 1.5.0 [flutter flutter_localizations path] - firebase_ui_oauth 1.4.0 [desktop_webview_auth firebase_auth firebase_ui_auth firebase_ui_shared flutter_svg flutter] - firebase_ui_shared 1.3.0 [flutter] - flutter_svg 1.1.6 [flutter meta path_drawing vector_math xml] - flutter_web_plugins 0.0.0 [flutter js characters collection material_color_utilities meta vector_math] - glob 2.1.1 [async collection file path string_scanner] - google_identity_services_web 0.2.1 [js meta] - google_sign_in_android 6.1.14 [flutter google_sign_in_platform_interface] - google_sign_in_ios 5.6.2 [flutter google_sign_in_platform_interface] - google_sign_in_platform_interface 2.4.0 [flutter plugin_platform_interface quiver] - google_sign_in_web 0.12.0 [flutter flutter_web_plugins google_identity_services_web google_sign_in_platform_interface http js] - html 0.15.3 [csslib source_span] - http 0.13.6 [async http_parser meta] - http_parser 4.0.2 [collection source_span string_scanner typed_data] - image 4.0.17 [archive meta xml] - intl 0.18.0 [clock meta path] - io 1.0.4 [meta path string_scanner] - js 0.6.7 [meta] - json_annotation 4.8.1 [meta] - lints 2.1.0 - logging 1.1.1 - matcher 0.12.15 [async meta stack_trace term_glyph test_api] - material_color_utilities 0.2.0 - meta 1.9.1 - nested 1.0.0 [flutter] - nm 0.5.0 [dbus] - package_config 2.1.0 [path] - path 1.8.3 - path_drawing 1.0.1 [vector_math meta path_parsing flutter] - path_parsing 1.0.1 [vector_math meta] - path_provider 2.0.15 [flutter path_provider_android path_provider_foundation path_provider_linux path_provider_platform_interface path_provider_windows] - path_provider_android 2.0.27 [flutter path_provider_platform_interface] - path_provider_foundation 2.2.3 [flutter path_provider_platform_interface] - path_provider_linux 2.1.10 [ffi flutter path path_provider_platform_interface xdg_directories] - path_provider_platform_interface 2.0.6 [flutter platform plugin_platform_interface] - path_provider_windows 2.1.6 [ffi flutter path path_provider_platform_interface win32] - petitparser 5.4.0 [meta] - platform 3.1.0 - plugin_platform_interface 2.1.4 [meta] - pointycastle 3.7.3 [collection convert js] - process 4.2.4 [file path platform] - pub_semver 2.1.4 [collection meta] - pubspec_parse 1.2.3 [checked_yaml collection json_annotation pub_semver yaml] - quiver 3.2.1 [matcher] - shared_preferences_android 2.1.4 [flutter shared_preferences_platform_interface] - shared_preferences_foundation 2.2.2 [flutter shared_preferences_platform_interface] - shared_preferences_linux 2.2.0 [file flutter path path_provider_linux path_provider_platform_interface shared_preferences_platform_interface] - shared_preferences_platform_interface 2.2.0 [flutter plugin_platform_interface] - shared_preferences_web 2.1.0 [flutter flutter_web_plugins shared_preferences_platform_interface] - shared_preferences_windows 2.2.0 [file flutter path path_provider_platform_interface path_provider_windows shared_preferences_platform_interface] - sky_engine 0.0.99 - source_span 1.9.1 [collection path term_glyph] - stack_trace 1.11.0 [path] - stream_channel 2.1.1 [async] - string_scanner 1.2.0 [source_span] - term_glyph 1.2.1 - test_api 0.5.1 [async boolean_selector collection meta source_span stack_trace stream_channel string_scanner term_glyph matcher] - typed_data 1.3.2 [collection] - universal_io 2.2.0 [collection meta typed_data] - url_launcher_android 6.0.33 [flutter url_launcher_platform_interface] - url_launcher_ios 6.1.4 [flutter url_launcher_platform_interface] - url_launcher_linux 3.0.5 [flutter url_launcher_platform_interface] - url_launcher_macos 3.0.5 [flutter url_launcher_platform_interface] - url_launcher_platform_interface 2.1.2 [flutter plugin_platform_interface] - url_launcher_web 2.0.16 [flutter flutter_web_plugins url_launcher_platform_interface] - url_launcher_windows 3.0.6 [flutter url_launcher_platform_interface] - vector_math 2.1.4 - win32 4.1.4 [ffi] - xdg_directories 1.0.0 [meta path process] - xml 6.3.0 [collection meta petitparser] - yaml 3.1.2 [collection source_span string_scanner] ```

darshankawar commented 1 year ago

@YarostheLaunchpadder Is this the behavior occuring using the font requirement as mentioned here https://github.com/firebase/flutterfire/pull/10293/files ?

If you are not using the required font, can you add that and try again to see if you still get same behavior or not in dark mode ?

YarosMallorca commented 1 year ago

@darshankawar This issue still persists after adding the font requirement, even if I remove my custom font from ThemeData. The issue does not happen in Light mode.

See photos below:

Light mode, custom Bruno Ace font applied in ThemeData:

Dark mode, custom Bruno Ace font applied in ThemeData:

Dark mode, no custom font applied:

darshankawar commented 1 year ago

Thanks for the update and feedback. I am able to replicate the same behavior.

/cc @lesnitsky

YarosMallorca commented 1 year ago

@darshankawar @lesnitsky Any updates on this?

pknuth commented 1 year ago

Is there possibility that we use theme colors instead of hardcoded yellow? Maybe some property to set it?

YarosMallorca commented 1 year ago

@pknuth Indeed this would be nice. But it is strange that it takes so long to fix a simple bug like this one.

EArminjon commented 9 months ago

firebase_ui_auth use hardcoded colors in some screen sadly... Example :

profile_screen.dart line 398 : Colors.yellow used for 'Email is not verified" container.
profile_screen.dart line 441: CupertinoColors.destructiveRed used for "Delete account" container.

It should use Theme :'( ! It could be interesting to rework all firebase_ui screens to bring more customisation by developers.

qwezey commented 8 months ago

I created a PR (#196). I didn't use Theme.of(context).colorScheme because I couldn't find an appropriate "warning" color. Instead, I decreased the opacity of the yellow. It allows the background to darken (in a dark theme) or lighten (in a light theme) the yellow, making the text legible in most cases.

grant-traynor commented 7 months ago

Could you not make it default to yellow in the constructor with the option to provide your own. This yellow is pretty horrible in my theme.

tapizquent commented 6 months ago

@qwezey Is there any way I could add this to my packages? Or maybe fork and do my own? I tried but kept getting

Because firebase_ui_oauth 1.4.17 depends on firebase_ui_auth ^1.12.1 and no versions of firebase_ui_oauth match >1.4.17 <2.0.0, firebase_ui_oauth ^1.4.17 requires firebase_ui_auth from hosted.
So, because award_ace depends on firebase_ui_auth from git which depends on firebase_ui_oauth ^1.4.17, version solving failed.
exit code 1

Update: I had to update every single package to point to my git fork because they have weird circular dependencies that, honestly, make no sense. After pointing these to the right places and dealing with the dependencies, I was able to see my changes and have the color not be like this.

As a workaround, instead of having the color of the div be yellow, I changed it to the outline and no background color. That way I don't have to care about the "right yellow"

cmjordan42 commented 4 months ago

Hi, we're approaching a year since this bug was reported. Can the owner(s) provide any comment on whether we can expect this to be fixed? This behavior is very in-your-face to users because it occurs on the default path for a new user, so it's unavoidable and 100% of users in dark mode have a negative experience because of this.

I understand an enhancement to allow callers to fiddle with theme configuration is probably not worth the effort at this point, but > can you please patch this bug with an approach that just makes this behave reasonably correctly in dark mode < so the bug is addressed and the other enhancements relating to themes can be considered separately?

firebase / FirebaseUI-Flutter