CODEWITHSUNDEEP
flutterdart
R2T8
R2T8

Reputation: 2590

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(),

Upvotes: 124

Views: 87020

Answers (18)

sahil prajapati
sahil prajapati

Reputation: 554

Accepted answer is absolutely right.

I just try to give answer with different approach.

first how you know your system theme-mode (like it's dark-mode or light mode)


    final brightness = MediaQuery.of(context).platformBrightness;
    final brightness2 = MediaQuery.platformBrightnessOf(context);
    final brightness3 = SchedulerBinding.instance.platformDispatcher.platformBrightness;
    final brightness4 = View.of(context).platformDispatcher.platformBrightness;

This all variable brightness, brightness2, brightness3 and brightness4 give same value of Brightness Class

But i Highly recommend go through MediaQuery.of(context).platformBrightness

Now You can used this variable to get your system theme-mode and change your app theme base this.

Little-More I make extension method for getting bool value like this way
Note : You can absolutely do without this method

extension IsDarkMode on Brightness {
  //! Way1
  bool get isDark => index == 0;
  bool get isLight => index == 1;

  //! Way2
  bool get isDark2 => this == Brightness.dark;
  bool get isLight2 => this == Brightness.light;
}

Reference Code


// Please Ignore MultiProvider and routes

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    final brightness = MediaQuery.of(context).platformBrightness;
    // final brightness = MediaQuery.platformBrightnessOf(context);
    // final brightness = SchedulerBinding.instance.platformDispatcher.platformBrightness;
    // final brightness = View.of(context).platformDispatcher.platformBrightness;

    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => HomeProvider()),
      ],
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'AI Video',
        routes: routes,
        initialRoute: RoutePath.splash,
        theme: AppTheme.instance.lightTheme, // your light theme data 
        darkTheme: AppTheme.instance.darkTheme, // your dark theme data

        //! Applied Dark/Light Theme here base on system theme
        // themeMode: brightness.isLight ? ThemeMode.light : ThemeMode.dark,
        themeMode: brightness.isLight2 ? ThemeMode.light : ThemeMode.dark,
      ),
    );
  }
}

Upvotes: 0

userx
userx

Reputation: 1121

If you are using GetX package for flutter already, then you can simply use the context extension method already provided in there which is

context.isDarkMode

GetX has many useful extension methods prebuilt. Thought I should mention this.

Upvotes: 0

Shajedur Rahman Panna
Shajedur Rahman Panna

Reputation: 59

Use this Theme.of(context).brightness

Upvotes: 1

CopsOnRoad
CopsOnRoad

Reputation: 268224

There are two ways:

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

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

  2. context is required:

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

    or

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

Upvotes: 318

Tran Chien
Tran Chien

Reputation: 629

Please notice that MediaQuery.of(context).platformBrightness will cause rebuilding on all media queries events including screen size changed, rotation, popup keyboard, ...

Instead, MediaQuery.platformBrightnessOf only rebuild when system dark mode changes:

final brightness = MediaQuery.platformBrightnessOf(context);
final systemDarkMode = brightness == Brightness.dark;

Upvotes: 2

MUCHIRA JUNIOR
MUCHIRA JUNIOR

Reputation: 127

Try the following code

Brightness brightness = Theme.of(context).brightness
bool isDarkMode = brightness == Brightness.dark;
bool isLightMode = brightness == Brightness.light;

Upvotes: 5

R2T8
R2T8

Reputation: 2590

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;
  }

Update 27.02.23:

final brightness = WidgetsBinding.instance.platformDispatcher.platformBrightness;

Upvotes: 20

Syed Waleed
Syed Waleed

Reputation: 1135

This will work even you change the app theme mode manually within your app. Theme.of(context).brightness == Brightness.dark

Upvotes: 0

Erfan Eghterafi
Erfan Eghterafi

Reputation: 5635

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

Brightness brightness =  MediaQueryData.fromWindow(WidgetsBinding.instance.window).platformBrightness;
bool darkModeOn = brightness == Brightness.dark;

or using theme

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

set brightness in MaterialApp

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

Upvotes: 2

Jan Zimola
Jan Zimola

Reputation: 1

For me forked, at least the version with the AdaptiveTheme plugin.

Theme.of(context) == darkThemeData

AdaptiveTheme.of(context).theme == darkThemeData

Upvotes: 0

BajaBob
BajaBob

Reputation: 2863

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');
}

Upvotes: 53

Bermjly Team
Bermjly Team

Reputation: 3701

How can I check if dark mode is enabled

Answer:

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

Upvotes: 17

Muhammad Sulaiman
Muhammad Sulaiman

Reputation: 151

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

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

Upvotes: 3

Xakiru
Xakiru

Reputation: 2866

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;
}

Upvotes: 0

Blasanka
Blasanka

Reputation: 22437

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

Upvotes: 6

preecha lardnok
preecha lardnok

Reputation: 9

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;
}

Upvotes: 0

AritroSinha
AritroSinha

Reputation: 188

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.

Upvotes: 11

Naeem Hasan
Naeem Hasan

Reputation: 331

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.

Upvotes: 19

Related Questions