How to Use Dark Mode in Flutter: Simple Guide

To use dark mode in Flutter, define both ThemeData.light() and ThemeData.dark() in your MaterialApp widget's theme and darkTheme properties. Then set themeMode to ThemeMode.system to follow the device's dark mode setting automatically.

Syntax

Flutter uses ThemeData to define light and dark themes. You assign these themes to theme and darkTheme properties of MaterialApp. The themeMode controls which theme is active:

• ThemeMode.light forces light theme
• ThemeMode.dark forces dark theme
• ThemeMode.system follows device settings

dart

MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.system,
  home: MyHomePage(),
)

Output

App uses light or dark theme based on device setting.

Example

This example shows a simple Flutter app that switches between light and dark mode automatically based on the device's system setting.

dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dark Mode Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dark Mode Example')),
      body: const Center(
        child: Text('This text color changes with theme'),
      ),
    );
  }
}

Output

App shows a page with an app bar and centered text. Colors adapt to light or dark mode automatically.

Common Pitfalls

Common mistakes when using dark mode in Flutter include:

• Not providing a darkTheme, so dark mode falls back to light theme.
• Setting themeMode to ThemeMode.light or ThemeMode.dark and ignoring system preference.
• Using hardcoded colors in widgets that don't adapt to theme changes.

Always use theme colors like Theme.of(context).colorScheme to ensure proper color adaptation.

dart

/* Wrong: hardcoded color ignores dark mode */
Text('Hello', style: TextStyle(color: Colors.black))

/* Right: uses theme color that adapts */
Text('Hello', style: TextStyle(color: Theme.of(context).colorScheme.onBackground))

Quick Reference

Summary tips for using dark mode in Flutter:

• Define both theme and darkTheme in MaterialApp.
• Set themeMode to ThemeMode.system to respect user preference.
• Use theme colors instead of fixed colors in widgets.
• Test your app in both light and dark modes.

Key Takeaways

Use theme, darkTheme, and themeMode in MaterialApp to enable dark mode.

Set themeMode to ThemeMode.system to follow device dark mode settings automatically.

Avoid hardcoded colors; use theme colors to ensure UI adapts correctly.

Test your app in both light and dark modes to ensure good user experience.