Dark mode

[chentao0707]

How to adapt the Dark Mode？

[hectorAguero]

From what I understand, you just need to add another custom theme in themes[] like the example, but with the value: Brigthness.dark in brigthness property, so for example:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ThemeProvider(
      themes: [
        AppTheme(
          id: "light_theme", // Id(or name) of the theme(Has to be unique)
          data: ThemeData(  // Real theme data
            brightness: Brightness.light,
            primaryColor: Colors.teal,
            accentColor: Colors.red,
          ),
        ),
        AppTheme(
          id: "dark_theme", // Id(or name) of the theme(Has to be unique)
          data: ThemeData(  // Real theme data
            brightness: Brightness.dark,
            primaryColor: Colors.teal,
            accentColor: Colors.red,
          ),
        ),
      ],
      ],
      child: MaterialApp(
        home: ThemeConsumer(
          child: HomePage(),
        ),
      ),
    );
  }
}

[kdsuneraavinash]

@chentao0707 Do you mean the functionality when the user changes the system theme to dark mode?

[chentao0707]

Yes. I hope ThemeProvider can change the dark theme Automatically when the user changed the system theme to dark mode.