Skip to main content
Logo Appt Light

Dark mode on Flutter

Dark mode darkens background colours and provides a more comfortable viewing experience in low light. This is essential for many visually impaired people since a light background colour can be painful or even impossible to look at for an extended period of time. But also people who have problems with their concentration, for example due to a brain disorder, benefit greatly from dark mode.

With Flutter, you can detect dark mode by checking if the platformBrightness has been set to Brightness.dark.

When defining an App, you can define a darkTheme to letter Flutter automatically use dark mode resources.

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

/// Dark mode extension
extension DarkMode on BuildContext {
  bool get isDarkMode {
    return MediaQuery.of(this).platformBrightness == Brightness.dark;
  }
}

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

Feedback?

Let us know!