[ Flutter "automatic" dark mode ]

Question

Developing a new Flutter app, pretty consequent, and was wondering to add a dark mode. Is there such a library/package that would automatically apply a dark mode on your actual app?

Like the "Dark Reader" google chrome plugin does on websites ?

No need to be "perfect", just to be "plug and play".

Thanks for answers/hints.

in main.dart `MaterialApp's` property theme: `ThemeData(brightness: Brightness.dark)`. It will work but if you set some widget's color like a container. it will not change that. — Vivek Chib, May 05 '23 at 08:50
actually it is easy if you just look [/cookbook/design/themes](https://docs.flutter.dev/cookbook/design/themes) and for color scheme, I'm using flex_color_scheme — Md. Yeasin Sheikh, May 05 '23 at 08:59

score 0 · Answer 1 · answered May 05 '23 at 08:55

In order to enable dark mode for your Flutter app, you have to do the following changes:

Define ThemeData with dark colors that you want in the app.

class AppTheme {
  static const Color primary = Color(0xFF000000);
  static const Color scaffoldBackgroundColor = Color(0xFF1E1E1E);

  static final theme = ThemeData(
    primaryColor: primary,
    scaffoldBackgroundColor: scaffoldBackgroundColor,
    textTheme: const TextTheme(
      bodySmall: TextStyle(
        color: Colors.white,
        fontSize: 16,
      ),
      bodyMedium: TextStyle(
        color: Colors.white,
        fontSize: 20,
      ),
      bodyLarge: TextStyle(
        color: Colors.white,
        fontSize: 24,
      ),
    ),
  );
}

Then, in the main.dart file, you can define your root widget as follows:

MaterialApp(
  title: 'My App',
  theme: AppTheme.theme,
  themeMode: ThemeMode.dark,
  home: const Scaffold(),
)

[ Flutter "automatic" dark mode ]

1 Answers1