-
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),
); |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
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: #160 (comment) 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: material-foundation/flutter-packages#401 At the end of the earlier discussion's answer #160 (comment) 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 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 |
Beta Was this translation helpful? Give feedback.
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: