[cupertino] Text is rendered black (so not visible) by default in dark mode

Steps to Reproduce

main.dart.zip

Text is incorrectly rendered as black in dark mode, while it should be white.
While the app, when run in bright mode (selected by the ios settings), is rendered correctly,
when dark mode is enabled, text is invisible.
In order to reproduce the problem, in the simulator enable the dark mode from the developer settings of the simulator (iOS 13.3 tested).

Target Platform: iOS
**Target OS version/browser: iOS 13.3 **
**Devices: iPhone 11Max (Simulator), Dark mode enabled **

Logs

$flutter analyze
Analyzing testapp...
No issues found! (ran in 2.2s)

[✓] Flutter (Channel stable, v1.12.13+hotfix.5, on Mac OS X 10.15.2 19C57, locale it)
    • Flutter version 1.12.13+hotfix.5 at /Users/andrea/Downloads/flutter
    • Framework revision 27321ebbad (4 weeks ago), 2019-12-10 18:15:01 -0800
    • Engine revision 2994f7e1e6
    • Dart version 2.7.0


[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/andrea/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • ANDROID_HOME = /Users/andrea/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.3, Build version 11C29
    • CocoaPods version 1.8.3

[!] Android Studio (version 3.5)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] VS Code (version 1.41.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.7.1

[✓] Connected device (2 available)
    • iPhone di Andrea  • b2d46b5c5c0fc643cee1d68900c98493c96c1fea • ios • iOS 13.3
    • iPhone 11 Pro Max • 09A9F5B2-3BA2-4B84-AAF1-902ABF57466E     • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-3 (simulator)

any update on this?

Code to reproduce:

import 'package:flutter/cupertino.dart';

void main() => runApp(CupertinoStoreApp());

class CupertinoStoreApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoStoreHomePage(),
    );
  }
}

class CupertinoStoreHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: const Text('Cupertino Store'),
      ),
      child:  SafeArea(child: Text("Here text is expected to be white")),
    );
  }
}

looks like this is in the pipeline to be looked at. In the meantime, however, are there any workarounds? Is there a property I can override in the dark mode theme to get colors to render correctly?

Setting the TextStyle on each Text widget like this seems to be working:
Text("[text]", style: CupertinoTheme.of(context).textTheme.textStyle)
This is however far from an ideal solution, as it has to be set on every Text object.

It looks like setting the app theme manually to dark does fix the problem but the app will always stay is darkmode
theme: CupertinoThemeData(brightness: Brightness.dark),

You can force the color to the appropriate value by CupertinoDynamicColor.resolve(CupertinoColors.label, context), but it seems like text styles like CupertinoTheme.of(context).textTheme.navTitleTextStyle may not automatically adapt their colors... Which leads to CupertinoNavigationBar and such displaying black text in dark mode.

Persists with current master 1.21.0-6.0.pre.117

flutter doctor -v

[✓] Flutter (Channel master, 1.21.0-6.0.pre.117, on Mac OS X 10.15.6 19G73, locale en-GB)
    • Flutter version 1.21.0-6.0.pre.117 at /Users/nevercode/dev/flutter
    • Framework revision 7ec2d360bc (2 hours ago), 2020-07-29 23:25:38 -0700
    • Engine revision a9910e409c
    • Dart version 2.10.0 (build 2.10.0-1.0.dev 24c7666def)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/nevercode/Library/Android/sdk
    • Platform android-29, build-tools 29.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.47.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.12.2

[✓] Connected device (6 available)
    • Redmi Note 7 (mobile)       • 6345c469                                 • android-arm64  • Android 9 (API 28)
    • Nevercode’s iPhone (mobile) • b668e524315069f3db3661ac11ff1f66afafebdb • ios            • iOS 13.6
    • iPhone 11 Pro Max (mobile)  • 55C8466B-5367-492B-8EFE-EC45D980571F     • ios            • com.apple.CoreSimulator.SimRuntime.iOS-13-6 (simulator)
    • macOS (desktop)             • macos                                    • darwin-x64     • Mac OS X 10.15.6 19G73
    • Web Server (web)            • web-server                               • web-javascript • Flutter Tools
    • Chrome (web)                • chrome                                   • web-javascript • Google Chrome 84.0.4147.105

• No issues found!

Dark mode for Cupertino is broken for Text widget

@LongCatIsLooong

Hi @LongCatIsLooong
I want to help with this issue, I looked into the default text style under WidgetsApp.build, it has correct color value in darkColor -> Color(0xffffffff).

Since CupertinoApp doesn't have MediaQuery but WidgetsApp.build should take care of this right?

Any ideas where we can fix this issue without breaking changes?
Thank you!

@TahaTesser

It's almost 2 years after bringing up this issue, and it's still not working correctly on Flutter 2.8.0-3.2.pre.
@TahaTesser yes, this is correct, but I find out that in default text style, the _effectiveColor is wrong, that's why Wang's workaround works.

I found proper workaround, which should fix all the problems (since this might happen also in other color configurations):

return MediaQuery.fromWindow(
  child: CupertinoApp(
    useInheritedMediaQuery: true,
    home: // ...
  )
);

Why this workaround works? I find out, that in time, when defaultTextStyle in CupertinoApp is initialized, MediaQuery is not initialized, thus it will return (by default) Light Mode. I would like to create PR, although, this is my first time digging into the internals and I doubt my solution will be the correct. Anyway, this workaround is quite elegant, so I will use it until this will be fixed.

@gamelaster

@gamelaster After looking into all the Cupertino widgets in detail, the real issue is that many simply don't properly resolve CupertinoDynamicColor (and thus, if passed a CupertinoDynamicColor don't display the correct version in dark mode)

I feel like the ultimate solution would be to go through and fix all of these one-off .resolveColor issues, but that's kind of a nightmarish headache from the standpoint of updating all the tests... which is why I haven't worked on a PR.

To expand a little more: In some cases, you can pass one of the CupertinoColors (e.g. CupertinoColors.secondarySystemBackground to a widget and it will always display the default (light, normal contrast, unelevated) since it never resolves. I'm curious if this workaround handles that.

@cpboyd

@cpboyd Hi and thank you for your fast reply 😊
Interesting thing is, that I didn't found any other widgets, which had issues with brightness settings. Also, the Text is not Cupertino widget, so how we would fix color resolving here?

I tested passing CupertinoColors, without using CupertinoDynamicColors.resolve, as you said, it always returns a default color.
But this same behavior is also in Material, isn't?

Thanks

I didn't found any other widgets, which had issues with brightness settings.

Several Cupertino widgets are unusable or barely usable in dark mode. See the example code and screenshots in #80860.

@mleonhard

Hi @mleonhard did you tried my workaround? Does it solve some issues, or it still happens?

Anyway, it still seems like Flutter team doesn't maintain the Cupertino (almost) at all, also the documentation for Cupertino is very weak ☹️

For now what I did was to write a code that checks if my app is on dark mode. If it is, it changes the text color to white, else it uses the default text color. I did this by using a custom font from Google font package, then imputing "the check" on the color parameters of the font and then finally inputted it on my materialApp textTheme parameter. (Of course I used riverpod for the state management)

I can show a sample if you want.

I found proper workaround, which should fix all the problems (since this might happen also in other color configurations):
return MediaQuery.fromWindow(
  child: CupertinoApp(
    useInheritedMediaQuery: true,
    home: // ...
  )
);
Why this workaround works? I find out, that in time, when defaultTextStyle in CupertinoApp is initialized, MediaQuery is not initialized, thus it will return (by default) Light Mode. I would like to create PR, although, this is my first time digging into the internals and I doubt my solution will be the correct. Anyway, this workaround is quite elegant, so I will use it until this will be fixed.

This is a better solution than any other specified above. Please do raise a PR to know more about this change from the flutter devs.

Any progress on this?

@ivirtex

@ivirtex as far as I know, no ☹️

Usually I handle this sort of problem by manually setting the brightness on the CupertinoThemeData using WidgetsBindingObserver. Then built-in widgets seem to pick up the correct light/dark mode stylings, and I can also query the theme for the brightness myself like CupertinoTheme.of(context).brightness. Example below.

Does that fix everyone's main visual problem here, or am I missing more details?

I definitely understand that needing to set that up manually is not ideal, and the fact that it is different from Material is a mistake in the API design. Any real solution to this issue should make Cupertino behave exactly like Material in this regard, and my workaround here would be redundant.

Code

import 'package:flutter/cupertino.dart';

void main() => runApp(const CupertinoHomePage());

class CupertinoHomePage extends StatefulWidget {
  const CupertinoHomePage({
    super.key,
  });

  @override
  State<CupertinoHomePage> createState() => _CupertinoHomePageState();
}

class _CupertinoHomePageState extends State<CupertinoHomePage> with WidgetsBindingObserver {
  Brightness _brightness = Brightness.light;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _brightness = WidgetsBinding.instance.window.platformBrightness;
  }

  @override
  void didChangePlatformBrightness() {
    if (mounted) {
      setState(() {
        _brightness = WidgetsBinding.instance.window.platformBrightness;
      });
    }

    super.didChangePlatformBrightness();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      theme: CupertinoThemeData(
        brightness: _brightness,
      ),
      home: const CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Cupertino App'),
        ),
        child: SafeArea(
          child: Text('Here text is expected to be white in dark mode, black in light mode.'),
        ),
      ),
    );
  }
}

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

[cupertino] Text is rendered black (so not visible) by default in dark mode #48438

Steps to Reproduce

Logs

18 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[cupertino] Text is rendered black (so not visible) by default in dark mode #48438

Description

Steps to Reproduce

Logs

Activity

eopeter commented on Jan 23, 2020

LongCatIsLooong commented on Mar 20, 2020

alexbhandari commented on Apr 10, 2020

TooMuchRAM commented on Apr 29, 2020

being-yash-t commented on Jun 8, 2020

cpboyd commented on Jul 19, 2020

VladyslavBondarenko commented on Jul 30, 2020

18 remaining items

TahaTesser commented on Oct 14, 2021

gamelaster commented on Dec 12, 2021

gamelaster commented on Dec 12, 2021

cpboyd commented on Dec 12, 2021

gamelaster commented on Dec 13, 2021

mleonhard commented on Dec 14, 2021

gamelaster commented on Dec 15, 2021

Princewil commented on Jan 29, 2022

samruncoach commented on Feb 23, 2022

ivirtex commented on Mar 5, 2022

gamelaster commented on Mar 5, 2022

justinmc commented on Dec 21, 2022

github-actions commented on Mar 13, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions