Veggie Seasons UI doesn't handle dark mode well

[redbrogdon]

Title says it all. We need to update the app to deal with iOS's dark mode properly rather than displaying black-on-black text in several places within the app.

[abd99]

I have started working on the fix for this issue.
I am planning on changing the declared styles to a method and passing it the BuildContext as a parameter.

Eg:

static const headlineName = TextStyle(
    color: Color.fromRGBO(0, 0, 0, 0.9),
    fontFamily: 'NotoSans',
    fontSize: 24,
    fontStyle: FontStyle.normal,
    fontWeight: FontWeight.bold,
  );

Will turn into:

static TextStyle headlineName(BuildContext context) => TextStyle(
        color: CupertinoTheme.of(context).textTheme.textStyle.color,
        fontFamily: 'NotoSans',
        fontSize: 24,
        fontStyle: FontStyle.normal,
        fontWeight: FontWeight.bold,
      );

Do you think this is a good solution? Or is there a better solution?
Please let me know @redbrogdon.

[redbrogdon]

To be quite honest, the way I originally set up the fonts and colors in Veggieseasons was not a great architecture. A lot of the support for theming in Cupertino didn't exist 12-16 months ago when the app was written.

Now, though, it should be possible to use CupertinoTextThemeData:

https://github.com/flutter/flutter/blob/210f4d83136a2eae773bda471db90ac27676f662/packages/flutter/lib/src/cupertino/text_theme.dart#L110

And CupertinoThemeData:

https://github.com/flutter/flutter/blob/210f4d83136a2eae773bda471db90ac27676f662/packages/flutter/lib/src/cupertino/theme.dart#L146

to do the job right.

If you look at an app like the Material Gallery, rather than having a file that sets up a bunch of font/color constants, it has a file that constructs its ThemeData objects for light and dark theme:

https://github.com/flutter/gallery/blob/master/lib/themes/gallery_theme_data.dart

This app could do the same thing, and set up some base text styles that work in a number of places, and then modify them as needed in particular widgets (to tweak font weight or whatever). There would still be some colors, gradients, and so on remaining in that styles file, but a lot of the text styling could be pulled out and "done right," so to speak.

So, while the change you're suggesting would work, there's an opportunity here to improve the app in a more fundamental way. Since these apps are meant to serve as examples of the best ways to do things with Flutter, that's really where we should be aiming.

If that's more work than you were looking to contribute, I completely understand, but I do feel it's the right way to go here.

[redbrogdon]

Some further context:

#395 has been merged, which adds better dark mode handling to VeggieSeasons (thanks, @abd99!). It's a good solution for now, but it would still be better to implement the styling in a manner more in keeping with current SDK capabilities.

[ADVavvas]

Hi,

I'd like to try this.

Quick question:
The Material Gallery app uses ThemeData which in turn uses ColorScheme. CupertinoThemeData does not. Should I stick with CupertinoThemeData or use ThemeData instead?

Thanks

[tusharojha]

@redbrogdon, I think we can close this issue now.

[redbrogdon]

I believe so.