text color is black in dark mode when use textTheme and primaryTextTheme with Google Font

[rddewan]

I am trying to set the light and dark theme with custom color it work great in light but when change to dark mode the text color is black

ThemeData lightTheme(BuildContext context) => FlexThemeData.light(
  colors: const FlexSchemeColor(
    primary: Color(0xff1e242e),
    primaryContainer: Color(0xffd0e4ff),
    secondary: Color(0xffac3306),
    secondaryContainer: Color(0xffffdbcf),
    tertiary: Color(0xff006875),
    tertiaryContainer: Color(0xff95f0ff),
    appBarColor: Color(0xffffdbcf),
    error: Color(0xffb00020),
  ),
  surfaceMode: FlexSurfaceMode.levelSurfacesLowScaffold,
  blendLevel: 7,
  subThemesData: const FlexSubThemesData(
    useTextTheme: true,
    useM2StyleDividerInM3: true,
  ),
  keyColors: const FlexKeyColors(
    keepPrimary: true,
  ),
  visualDensity: FlexColorScheme.comfortablePlatformDensity,
  useMaterial3: true,
  swapLegacyOnMaterial3: true, 
  textTheme: GoogleFonts.montserratTextTheme(Theme.of(context).textTheme),
  primaryTextTheme: GoogleFonts.montserratTextTheme(Theme.of(context).textTheme),
);

ThemeData darkTheme(BuildContext context) =>  FlexThemeData.dark(
  colors: const FlexSchemeColor(
    primary: Color(0xff1e242e),
    primaryContainer: Color(0xff00325b),
    secondary: Color(0xffffb59d),
    secondaryContainer: Color(0xff872100),
    tertiary: Color(0xff86d2e1),
    tertiaryContainer: Color(0xff004e59),
    appBarColor: Color(0xff872100),
    error: Color(0xffcf6679),
    swapOnMaterial3: true,
  ),  
  surfaceMode: FlexSurfaceMode.levelSurfacesLowScaffold,
  blendLevel: 13,
  subThemesData: const FlexSubThemesData(
    useTextTheme: true,
    useM2StyleDividerInM3: true,
  ),
  keyColors: const FlexKeyColors(
    keepTertiary: true,
    keepSecondaryContainer: true,
    keepTertiaryContainer: true,
  ),
  visualDensity: FlexColorScheme.comfortablePlatformDensity,
  useMaterial3: true,
  swapLegacyOnMaterial3: true,
  textTheme: GoogleFonts.montserratTextTheme(Theme.of(context).textTheme),
  primaryTextTheme: GoogleFonts.montserratTextTheme(Theme.of(context).textTheme),

);

[rydmike]

Hi @rddewan, thanks for the report.

What you are seeing is actually not a FlexColorScheme issue. If you try your text theme setup from the above example with just vanilla ThemeData, you get the same result. See this example:

      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xff1e242e)), 
        textTheme: GoogleFonts.montserratTextTheme(Theme.of(context).textTheme),
        primaryTextTheme: GoogleFonts.montserratTextTheme(Theme.of(context).textTheme),
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(brightness: Brightness.dark, seedColor: Color(0xff1e242e)),
        textTheme: GoogleFonts.montserratTextTheme(Theme.of(context).textTheme),
        primaryTextTheme: GoogleFonts.montserratTextTheme(Theme.of(context).textTheme),
      ),

It gives the same issue regarding wrong text contrast in the text themes:

Why does this happen?

You can read all about it here in this Discussions answer: https://github.com/rydmike/flex_color_scheme/discussions/160#discussioncomment-5999257

Which also contains a lot of info about the proper way to apply text theme and text style. It can be a complex topic.

At the heart of the issue is in this case is actually GoogleFonts that preloads the fonts text theme with black color. Typically they would not have any color and the Flutter theming process would apply that. More info about the issue here:

https://github.com/material-foundation/flutter-packages/issues/401

At the end of the earlier discussion's answer https://github.com/rydmike/flex_color_scheme/discussions/160#discussioncomment-5999257 you will find a proposed setup that shows one way to create a custom text theme, using just the type info and assembling the text theme yourself. Which is important if you also want the correct font weights and not estimated ones.

All this being said, (and if you don't have custom weights) FlexColorScheme does include a GoogleFonts TextTheme quick fix. If you from GoogleFonts.montserratTextTheme(Theme.of(context).textTheme), remove the Theme.of(context).textTheme, then FlexColorScheme, will detect that the font is a "raw" GoogleFonts constructor provided one, and apply the correct colors to the textTheme, primaryTextTheme in both light and dark mode and also even correct colors for M2/M3 mode.

ThemeData lightTheme(BuildContext context) => FlexThemeData.light(
  colors: const FlexSchemeColor(
    primary: Color(0xff1e242e),
    primaryContainer: Color(0xffd0e4ff),
    secondary: Color(0xffac3306),
    secondaryContainer: Color(0xffffdbcf),
    tertiary: Color(0xff006875),
    tertiaryContainer: Color(0xff95f0ff),
    appBarColor: Color(0xffffdbcf),
    error: Color(0xffb00020),
  ),
  surfaceMode: FlexSurfaceMode.levelSurfacesLowScaffold,
  blendLevel: 7,
  subThemesData: const FlexSubThemesData(
    useTextTheme: true,
    useM2StyleDividerInM3: true,
  ),
  keyColors: const FlexKeyColors(
    keepPrimary: true,
  ),
  visualDensity: FlexColorScheme.comfortablePlatformDensity,
  useMaterial3: true,
  swapLegacyOnMaterial3: true, 
  textTheme: GoogleFonts.montserratTextTheme(),
  primaryTextTheme: GoogleFonts.montserratTextTheme(),
);

ThemeData darkTheme(BuildContext context) =>  FlexThemeData.dark(
  colors: const FlexSchemeColor(
    primary: Color(0xff1e242e),
    primaryContainer: Color(0xff00325b),
    secondary: Color(0xffffb59d),
    secondaryContainer: Color(0xff872100),
    tertiary: Color(0xff86d2e1),
    tertiaryContainer: Color(0xff004e59),
    appBarColor: Color(0xff872100),
    error: Color(0xffcf6679),
    swapOnMaterial3: true,
  ),  
  surfaceMode: FlexSurfaceMode.levelSurfacesLowScaffold,
  blendLevel: 13,
  subThemesData: const FlexSubThemesData(
    useTextTheme: true,
    useM2StyleDividerInM3: true,
  ),
  keyColors: const FlexKeyColors(
    keepTertiary: true,
    keepSecondaryContainer: true,
    keepTertiaryContainer: true,
  ),
  visualDensity: FlexColorScheme.comfortablePlatformDensity,
  useMaterial3: true,
  swapLegacyOnMaterial3: true,
  textTheme: GoogleFonts.montserratTextTheme(),
  primaryTextTheme: GoogleFonts.montserratTextTheme(),

);

Light mode text:

Dark mode text:

Hope this helps! 😄

BR Mike