How to check if dark mode is enabled on iOS/Android using Flutter?

How can I check if dark mode is enabled in Android Q with Flutter?
I know how to set the dark mode, but I didn't find a way to check the background theme.
Here is the code to set the dark theme.

darkTheme: ThemeData.dark(),

There are two ways:

1. NO context required. Can be used in initState for example:

    var brightness = SchedulerBinding.instance!.window.platformBrightness;
    bool isDarkMode = brightness == Brightness.dark;
   

2. context is required:

    var brightness = MediaQuery.of(context).platformBrightness;
    bool isDarkMode = brightness == Brightness.dark;
   

If you define a dark theme in your MaterialApp, your app will automatically go dark when Android Q dark theme is enabled. You have to specify your dark theme like this:

MaterialApp(
  theme: ThemeData(
    brightness: Brightness.light,
    primaryColor: Colors.red,
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
  ),
);

According to this medium article,

> Now when you toggle Dark Theme in your system drawer, your Flutter app will automatically switch from your regular theme to your darkTheme!

However, if you want to manually check whether you're on dark mode, you can easily write a method using the Platform Channel API. More details here. As for the native code, check here.

I found the way. Here it is.

  bool _darkModeEnabled = false;

  void _checkIfDarkModeEnabled() {
    final ThemeData theme = Theme.of(context);
    theme.brightness == appDarkTheme().brightness
        ? _darkModeEnabled = true
        : _darkModeEnabled = false;
  }

With the introduction of Extension methods in Dart, I prefer to append that functionality to BuildContext directly. This provides a cleaner feeling interface and reads much better.

import 'dart:ui';
import 'package:flutter/widgets.dart';

extension DarkMode on BuildContext {
  /// is dark mode currently enabled?
  bool get isDarkMode {
    final brightness = MediaQuery.of(this).platformBrightness;
    return brightness == Brightness.dark;
  }
}

Then in my build functions I can use it easily.

@override
Widget build(BuildContext context) {
  final Widget logo = SvgPicture.asset(
      context.isDarkMode ? "assets/logo_dark.svg" : "assets/logo.svg",
      semanticsLabel: 'my logo');
}

You can use ThemeMode inside MaterialApp.

MaterialApp(
  themeMode: ThemeMode.system,
  theme: ThemeData(
    brightness: Brightness.light,
    primaryColor: Colors.red,
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
  ),
);

ThemeMode.system will get the active theme in the OS and then either use the theme or darkTheme. Additionally ThemeMode.dark will always use the darkTheme and ThemeMode.light will always use the theme.

No matter what the current platform is, if you have access to context you can simply check it by using Theme. Following is sample that I used to change white color to transparent color if currently app theme is dark.

(Theme.of(context) == Brightness.dark) ? Colors.white : Colors.transparent

> How can I check if dark mode is enabled

Answer:

Theme.of(context).brightness == Brightness.dark

bool _darkModeEnabled = false;
bool _lightModeEnabled = false;

void _checkIfDarkModeEnabled() {
final ThemeData theme = Theme.of(context);
theme.brightness == Brightness.dark
    ? _darkModeEnabled = true
    : _darkModeEnabled = false;
}
void _checkIfLightModeEnabled() {
final ThemeData theme = Theme.of(context);
theme.brightness == Brightness.light
    ? _lightModeEnabled = true
    : _lightModeEnabled = false;
}

Check OS theme mode: (if using ThemeMode.system)

var brightness = SchedulerBinding.instance.window.platformBrightness;
bool darkModeOn = brightness == Brightness.dark;

If want to check theme that your app is using

set brightness in MaterialApp

theme: ThemeData(
    brightness: Brightness.light,
  ),
darkTheme: ThemeData(
    brightness: Brightness.dark,
  ),

and then get theme

var brightness = Theme.of(context).brightness
bool darkModeOn = brightness == Brightness.dark;

I'm using https://github.com/arthurdenner/theme_mode_handler, and the right way to check if it's set on system first, otherwise we check the theme handler:

bool is_dark(BuildContext context){
  if(ThemeModeHandler.of(context)!.themeMode == ThemeMode.system)
    return (Theme.of(context).brightness == Brightness.dark);
  else
    return ThemeModeHandler.of(context)!.themeMode == ThemeMode.dark;
}

If you are using Getx state management, then don't worry because Getx provided solution

bool ThemeModes(){
Get.isDarkMode? return true: return false;}