Can't set text color

[westito]

On playgorund I can't select custom text color (onPrimary, onSurface, etc.)

[rydmike]

Can you explain for which components you would like to set the Text (foreground) color?

Most components have it, but maybe not all, let me know if some critical one is missing.

As for the TextTheme itself, it gets its default color from the resulting and effective ColorScheme. In M3 mode it is onSurface generally. Setting it to anything else as a default overall color, while possible, does not make much sense in the Material design system.

You can still do it with FlexColorScheme, but not in the Themes Playground, but you can create a totally custom TextThemein code with whatever font sizes and colors you need/want and apply it to FlexThemeData, just as in ThemeData.

Building a UI for this in the Playground is currently a bit out of scope for this version of the free open source visual theming tool.

[westito]

Sadly many "designer" don't follow material design, and also, the customer wants exactly that design that designer make. Currently I have a project that gets a slightly different text color that material gives. On playground or with flex constructor I can't select custom colors for surfaces or text. I solve this by overriding scheme right now:

ThemeData _base = FlexThemeData.light(
  colors: const FlexSchemeColor(
    primary: Color(0xFF84BD00),
    primaryContainer: Color(0xFF6A7E1A),
    secondary: Color(0xFF84BD00),
    secondaryContainer: Color(0xFF6A7E1F),
    tertiary: Color(0xFFAAE326),
    tertiaryContainer: Color(0xFF6A7E1F),
    appBarColor: Color(0xFF84BD00),
    error: Color(0xFFDA291C),
    errorContainer: Color(0xFFFFDAD6),
  ),
  usedColors: 4,
  appBarElevation: 0,
  bottomAppBarElevation: 0,
  lightIsWhite: true,
  appBarStyle: FlexAppBarStyle.primary,
  tabBarStyle: FlexTabBarStyle.forAppBar,
  subThemesData: _subThemeData,
  visualDensity: VisualDensity.standard,
);

ThemeData _appTheme = FlexThemeData.light(
  colorScheme: _base.colorScheme.copyWith(
    surfaceDim: const Color(0xFFF3F2F1),
    onPrimary: const Color(0xFFFFFFFF),
    onSurface: const Color(0xFF685C54),
  ),
  usedColors: 4,
  appBarElevation: 0,
  bottomAppBarElevation: 0,
  lightIsWhite: true,
  subThemesData: _subThemeData,
  visualDensity: VisualDensity.standard,
  appBarStyle: FlexAppBarStyle.primary,
  tabBarStyle: FlexTabBarStyle.forAppBar,
  cupertinoOverrideTheme: const CupertinoThemeData(applyThemeToAll: true),
);

[rydmike]

This is indeed one way setting the desired color overrides, well done! 😄

Hint: You can also create _base as a FlexColorScheme with FlexColorScheme.light(...) same content as the above first base FlexThemeData.light(...). Then in the _appTheme for colorScheme use _base.toScheme.copyWith(...).

This uses slightly less compute and memory, as it never creates the full large ThemeData object of the base FlexColorScheme, it only has the blueprint for it, but never makes the ThemeData object, you only make the much smaller resulting ColorScheme object from it.

See https://docs.flexcolorscheme.com/api_guide#use-flexcolorscheme-or-flexthemedata for more info.

Feature discussion

I have been considering adding a way to provide custom overrides without the extra creation step. But indeed both versions above works fine, just a bit extra compute. Since it is typically something that is only computed and done once at startup to create light and dark mode ThemeData, it does not really matter that it is done in two steps, but I agree that it is a bit tedious.

It also feels a bit "tedious" to add all the ColorScheme colors to FlexSchemeColor so you can provide overrides there, but maybe that would be the most clear way.

Using the ColorScheme input is really like you used it here, only applicable when you have a fully qualified custom one that, you use as override for pretty much everything. So it is not quite the same thing, and some colors in it are required, really tedious to make, but handy with copyWith as you used it. It also useful if you are using the package to obtain the phone system ColorScheme or make a ColorScheme from an image, then you can use that ColorScheme as input to FCS.

There are by the way some direct legacy overrides for some color scheme colors already in the base FlexColorScheme.light/dark and FlexTHemeData.light/dark factories, but not all. So an alternative way would be to just provide all ColorScheme colors as override input options there. Then again, I also have a need/desire to create some new default built-in schemes that uses custom colors for some of these colors, so then the better option would again be to add them to the FlexSchemeColor that holds color values/tokens for all the built-in schemes.

Going that way I would probably deprecate the duplicate inputs in FlexColorScheme.light/dark and FlexTHemeData.light/dark factories to clean it up a bit.

Thoughts? 😄