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),
);
}
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