Detect if iOS13 Dark Mode is enabled from Flutter/Dart

iron59 picture iron59 · Aug 13, 2019 · Viewed 10.9k times · Source

I'm writing a Flutter app for Android and iOS which will change its style/theme based on iOS' Dark Mode status.

Is there currently anything like a MediaQuery.isDarkModeEnabled in Flutter?

There is a GitHub issue open here but the Flutter team must be overwhelmed in issues so I can't see this being implemented too soon.

I can use 'traitCollection.userInterfaceStyle' from iOS-specific code channels, but adding platform-specific code for Flutter/Dart apps is not something I'm experienced in. Currently working on this solution!

For example, someone could have a CupertinoPicker with adaptive colors:

CupertinoPicker(
    backgroundColor: isDarkModeEnabled ? Colors.black : Colors.white,
    children: items.map((thisItem) => Text(thisItem.name)).toList(),
    itemExtent: 32,
    onSelectedItemChanged: (newItem) {
        setState(() => this.item = items[newItem]);
    }
)

Answer

tewshi picture tewshi · Oct 4, 2019

Here's how you can set different colors for light and dark mode, the app will automatically switch if the phone is set to dark mode or light mode.

MaterialApp(
  theme: ThemeData(
    brightness: Brightness.light,
    primaryColor: Colors.red,
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
    // additional settings go here
  ),
);

::Update::

You can also get the platform brightness (Brightness.light / Brightness.dark) using

WidgetsBinding.instance.window.platformBrightness

but you will have to use the WidgetsBindingObserver mixin and override the method below

@override
void didChangePlatformBrightness() {
    print(WidgetsBinding.instance.window.platformBrightness); // should print Brightness.light / Brightness.dark when you switch
    super.didChangePlatformBrightness(); // make sure you call this
}

see https://api.flutter.dev/flutter/widgets/WidgetsBindingObserver-class.html on how to use the mixin.