How to use ColorScheme in FLutter ThemeData?

Question

I'm trying to create two color schemes, one for light mode and one for dark mode. So in main.dart I returned this MaterialApp with lightThemeData and darkThemeData

return MaterialApp(
  initialRoute: '/',
  routes: routesHandler,
  theme: lightThemeData(context),
  darkTheme: darkThemeData(context),
  debugShowCheckedModeBanner: false,
);

Then I created two ThemeData functions for light theme and dark theme and a colorScheme for each one, and this is how lightThemeColors(context) and darkThemeColors(context) looks like

ColorScheme lightThemeColors(context) {
  return const ColorScheme(
    brightness: Brightness.light,
    primary: Color(0xFF202020),
    onPrimary: Color(0xFF505050),
    secondary: Color(0xFFBBBBBB),
    onSecondary: Color(0xFFEAEAEA),
    error: Color(0xFFF32424),
    onError: Color(0xFFF32424),
    background: Color(0xFFF1F2F3),
    onBackground: Color(0xFFFFFFFF),
    surface: Color(0xFF54B435),
    onSurface: Color(0xFF54B435),
  );
}

ColorScheme darkThemeColors(context) {
  return const ColorScheme(
    brightness: Brightness.dark,
    primary: Color(0xFFF1F2F3),
    onPrimary: Color(0xFFFFFFFF),
    secondary: Color(0xFFBBBBBB),
    onSecondary: Color(0xFFEAEAEA),
    error: Color(0xFFF32424),
    onError: Color(0xFFF32424),
    background: Color(0xFF202020),
    onBackground: Color(0xFF505050),
    surface: Color(0xFF54B435),
    onSurface: Color(0xFF54B435),
  );
}

And these are the two ThemeData functions for light and dark theme

ThemeData lightThemeData(BuildContext context) {
  return ThemeData(
    scaffoldBackgroundColor: Theme.of(context).colorScheme.background,
    textTheme: textTheme(context),
    appBarTheme: appBarTheme(context),
    inputDecorationTheme: inputDecorationData(context),
    colorScheme: lightThemeColors(context),
  );
}

ThemeData darkThemeData(BuildContext context) {
  return ThemeData(
    scaffoldBackgroundColor: Theme.of(context).colorScheme.background,
    textTheme: textTheme(context),
    appBarTheme: appBarTheme(context),
    inputDecorationTheme: inputDecorationData(context),
    colorScheme: darkThemeColors(context),
  );
}

Now the problem is in the scaffoldBackgroundColor, appBarTheme and inputDecorationTheme.

It just ignores the scaffoldBackgroundColor and uses the defualt one, which is light blue.

And in appBarTheme I tried to access the colors I defined earlier in the colorScheme function like this, but unfortunately nothing happens, and the colorScheme gets ignored.

appBarTheme(context) {
  return AppBarTheme(
    backgroundColor: Theme.of(context).colorScheme.background,
    titleTextStyle: Theme.of(context).textTheme.headline5?.copyWith(color: Theme.of(context).colorScheme.primary),
  );
}

And the same happens in inputDecorationTheme, when I try to change the fillColor and the hintStyle color it ignores them as well.

InputDecorationTheme inputDecorationData(context) {
  return InputDecorationTheme(
    filled: true,
    fillColor: Theme.of(context).colorScheme.onBackground,
    hintStyle: Theme.of(context).textTheme.bodyText1?.copyWith(color: Theme.of(context).colorScheme.onSecondary),
  );
}

score 1 · Accepted Answer · answered Nov 30 '22 at 02:23

Inside lightThemeData, you are calling scaffoldBackgroundColor: Theme.of(context).colorScheme which will return the default theme data as Theme widget does not exists by the time code is executed. In that case flutter returns default theme.

You should try using scaffoldBackgroundColor: lightThemeColors(context).backgroundColor

How to use ColorScheme in FLutter ThemeData?

1 Answers1