Flutter change extends

Question

I want to change the color based on the theme mode. In AppTheme I mention var

class AppTheme {
  static AppTheme of(BuildContext context) => DarkModeTheme();

  late Color primaryColor;
  late Color secondaryColor;
}

In dark mode colors

class DarkModeTheme extends AppTheme {
  @override
  Color primaryColor = const Color(0xFFFF5963);
  @override
  Color secondaryColor = const Color(0xFFBE7274);
}

In light mode colors

class LightModeTheme extends AppTheme {
  @override
  Color primaryColor = const Color(0xFFA71A1C);
  @override
  Color secondaryColor = const Color(0xFFF6F6F6);
}

The way I call the color

Container(
  width: 100,
  height: 100,
  color: AppTheme.of(context).primaryColor,
)

Initially, I mentioned the DarkModeTheme(), so the DarkModeTheme primary color is what I have seen. how can I change the LightModeTheme()

Answer 1

make a switch button on your application for exemple Night Mode True or False, and store it in a static parameter appMode, then change your code as follow

 class AppTheme {
  static AppTheme of(BuildContext context) => appMode ==false?  LightModeTheme():DarkModeTheme()

  late Color primaryColor;
  late Color secondaryColor;
}