Dark Mode and Custom System UI Overlay

Notes

Enabling Dark Mode is easy. Just do:

MaterialApp(
  theme: ThemeData.dark().copyWith(
    // here you can customize any ThemeData properties. Example:
    scaffoldBackgroundColor: Colors.black,
  ),
  home: MyHomePage(),
)

Note that if the top area of your UI is dark, you'll want to choose a light style for the system UI Overlay. This is done by adding a parent AnnotatedRegion to your Scaffold:

AnnotatedRegion<SystemUiOverlayStyle>(
  value: SystemUiOverlayStyle.light,
  child: Scaffold(...)
)

As a result, the MyHomePage widget will look like this:

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light,
      child: Scaffold(
        body: Center(
          child: Stopwatch(),
        ),
      ),
    );
  }
}
If needed, AnnotatedRegion can be set on screen-by-screen basis.


Complete and Continue  
Discussion

3 comments