Modern mobile applications are expected to provide a comfortable and personalized user experience. One of the simplest ways to improve the experience of a Flutter application is by supporting Dark Mode and Light Mode.

Flutter provides a powerful built-in theming system that allows developers to define colors, typography, buttons, app bars, input fields, cards, and other UI components in one central place. Instead of manually changing colors on every screen, you can create reusable themes and switch between them easily.

In this guide, you will learn how to build a Dark and Light Theme system in Flutter using Dart, how theme switching works, how to remember the user’s preference, how to use ThemeData, ColorScheme, ThemeMode, and how to create a clean theme architecture that can scale with a real-world application.

---

What Is Dark Mode and Light Mode?

A Light Theme generally uses bright backgrounds with dark text, while a Dark Theme uses dark backgrounds with lighter text.

For example:

Light Theme

• White or light-colored background
• Dark text
• Light cards
• Dark icons
• Bright input fields

Dark Theme

• Dark or black background
• White or light-colored text
• Dark cards
• Light icons
• Dark input fields

A good theme system should allow the user to switch between these modes without restarting the application.

---

Why Should Flutter Apps Support Dark and Light Themes?

Theme support is not only about appearance. It can significantly improve usability.

1. Better User Experience

Users can choose the appearance that is comfortable for them.

2. Better Night-Time Usage

Dark mode can be more comfortable when using an application in low-light environments.

3. Modern App Design

Many popular applications provide dark and light modes, so theme switching has become a common mobile UX feature.

4. Centralized Design

Flutter’s theme system allows you to define your application’s colors, fonts, buttons, inputs, and other components centrally.

5. Easier Maintenance

Instead of writing:

color: isDark ? Colors.black : Colors.white

on every widget, you can use Flutter’s theme system:

color: Theme.of(context).colorScheme.surface

This makes your code cleaner and easier to maintain.

---

Understanding Flutter’s Theme System

Flutter provides several important classes for managing themes.

The most important ones are:

• ThemeData
• ColorScheme
• ThemeMode
• Theme.of(context)
• MediaQuery
• Brightness

Let’s understand them.

---

What Is ThemeData?

ThemeData contains the visual configuration of your Flutter application.

For example:

ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.blue,
)

You can define:

• Colors
• App bar appearance
• Buttons
• Cards
• Input fields
• Text styles
• Dialogs
• Navigation bars
• Checkboxes
• Switches
• Floating action buttons
• And much more

A typical application has two ThemeData objects:

ThemeData lightTheme = ThemeData(...);

ThemeData darkTheme = ThemeData(...);

---

What Is ThemeMode?

ThemeMode tells Flutter which theme should currently be active.

It has three important values:

ThemeMode.light
ThemeMode.dark
ThemeMode.system

ThemeMode.light

Always use the light theme.

themeMode: ThemeMode.light

ThemeMode.dark

Always use the dark theme.

themeMode: ThemeMode.dark

ThemeMode.system

Use the theme configured on the user’s device.

themeMode: ThemeMode.system

For many applications, supporting all three options is a great approach:

• Light
• Dark
• System Default

---

Basic Flutter Light and Dark Theme Setup

Let’s start with a simple implementation.

Create a Flutter application and configure your MaterialApp.

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(
      debugShowCheckedModeBanner: false,

      theme: ThemeData(
        brightness: Brightness.light,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
          brightness: Brightness.light,
        ),
      ),

      darkTheme: ThemeData(
        brightness: Brightness.dark,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
          brightness: Brightness.dark,
        ),
      ),

      themeMode: ThemeMode.system,

      home: const HomeScreen(),
    );
  }
}

Flutter will automatically use the appropriate theme based on the device’s system setting.

---

Creating a Custom Light Theme

Instead of defining everything inside MaterialApp, it is better to create a separate theme file.

For example:

lib/
├── main.dart
├── theme/
│   ├── app_theme.dart
│   ├── light_theme.dart
│   └── dark_theme.dart
└── screens/
    └── home_screen.dart

Create light_theme.dart.

import 'package:flutter/material.dart';

class LightTheme {
  static ThemeData theme = ThemeData(
    brightness: Brightness.light,

    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
      brightness: Brightness.light,
    ),

    scaffoldBackgroundColor: Colors.white,

    appBarTheme: const AppBarTheme(
      backgroundColor: Colors.white,
      foregroundColor: Colors.black,
      elevation: 0,
    ),

    cardTheme: const CardThemeData(
      color: Color(0xFFF5F5F5),
      elevation: 1,
    ),
  );
}

This gives you a centralized place for your light theme.

---

Creating a Custom Dark Theme

Now create dark_theme.dart.

import 'package:flutter/material.dart';

class DarkTheme {
  static ThemeData theme = ThemeData(
    brightness: Brightness.dark,

    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
      brightness: Brightness.dark,
    ),

    scaffoldBackgroundColor: const Color(0xFF121212),

    appBarTheme: const AppBarTheme(
      backgroundColor: Color(0xFF121212),
      foregroundColor: Colors.white,
      elevation: 0,
    ),

    cardTheme: const CardThemeData(
      color: Color(0xFF1E1E1E),
      elevation: 1,
    ),
  );
}

Now you have separate themes for light and dark modes.

---

Connecting Both Themes to MaterialApp

Your main.dart can now look like this:

import 'package:flutter/material.dart';
import 'theme/light_theme.dart';
import 'theme/dark_theme.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,

      theme: LightTheme.theme,

      darkTheme: DarkTheme.theme,

      themeMode: ThemeMode.system,

      home: const HomeScreen(),
    );
  }
}

Now Flutter automatically switches between your light and dark themes based on the system setting.

---

Using Theme Colors Inside Widgets

One of the most important rules when implementing themes is:

Avoid hardcoding colors throughout your application.

Instead of:

Container(
  color: Colors.white,
)

use:

Container(
  color: Theme.of(context).colorScheme.surface,
)

This allows the color to change automatically when the theme changes.

---

Using ColorScheme

Modern Flutter applications should make good use of ColorScheme.

Example:

final colors = Theme.of(context).colorScheme;

Then:

Container(
  color: colors.surface,
)

Other useful colors include:

colors.primary
colors.onPrimary
colors.secondary
colors.onSecondary
colors.surface
colors.onSurface
colors.error
colors.onError

The onX colors are generally designed for content displayed on top of the corresponding color.

For example:

Container(
  color: colors.primary,
  child: Text(
    'Hello',
    style: TextStyle(
      color: colors.onPrimary,
    ),
  ),
)

This is much more maintainable than manually choosing colors throughout the application.

---

Creating a Theme Toggle

Now let’s create a button that allows the user to switch between light and dark themes.

Because MaterialApp is controlled by the application state, we need a stateful approach.

A simple example is:

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  ThemeMode themeMode = ThemeMode.light;

  void toggleTheme() {
    setState(() {
      themeMode = themeMode == ThemeMode.light
          ? ThemeMode.dark
          : ThemeMode.light;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: LightTheme.theme,
      darkTheme: DarkTheme.theme,
      themeMode: themeMode,

      home: HomeScreen(
        onThemeToggle: toggleTheme,
      ),
    );
  }
}

Now the home screen can trigger the theme change.

---

Creating a Theme Switch Button

You can use Flutter’s Switch widget.

Switch(
  value: Theme.of(context).brightness == Brightness.dark,
  onChanged: (value) {
    widget.onThemeToggle();
  },
)

Or create a more user-friendly button:

IconButton(
  icon: Icon(
    Theme.of(context).brightness == Brightness.dark
        ? Icons.light_mode
        : Icons.dark_mode,
  ),
  onPressed: widget.onThemeToggle,
)

This automatically displays:

• 🌙 Dark mode icon when light mode is active
• ☀️ Light mode icon when dark mode is active

---

Complete Simple Example

Here is a basic complete implementation.

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  ThemeMode themeMode = ThemeMode.system;

  void toggleTheme() {
    setState(() {
      if (themeMode == ThemeMode.light) {
        themeMode = ThemeMode.dark;
      } else {
        themeMode = ThemeMode.light;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,

      theme: ThemeData(
        brightness: Brightness.light,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
          brightness: Brightness.light,
        ),
      ),

      darkTheme: ThemeData(
        brightness: Brightness.dark,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
          brightness: Brightness.dark,
        ),
      ),

      themeMode: themeMode,

      home: HomeScreen(
        onThemeToggle: toggleTheme,
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {

  final VoidCallback onThemeToggle;

  const HomeScreen({
    super.key,
    required this.onThemeToggle,
  });

  @override
  Widget build(BuildContext context) {
    final isDark =
        Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Theme Demo'),
        actions: [
          IconButton(
            onPressed: onThemeToggle,
            icon: Icon(
              isDark
                  ? Icons.light_mode
                  : Icons.dark_mode,
            ),
          ),
        ],
      ),

      body: Center(
        child: Text(
          isDark
              ? 'Dark Theme Enabled'
              : 'Light Theme Enabled',
          style: Theme.of(context).textTheme.headlineSmall,
        ),
      ),
    );
  }
}

This is enough for a basic theme-switching application.

---

Light, Dark, and System Theme Selection

A better application can provide three choices:

Light
Dark
System Default

You can represent this with:

enum AppThemeMode {
  light,
  dark,
  system,
}

Then convert it to Flutter’s ThemeMode.

ThemeMode getThemeMode(AppThemeMode mode) {
  switch (mode) {
    case AppThemeMode.light:
      return ThemeMode.light;

    case AppThemeMode.dark:
      return ThemeMode.dark;

    case AppThemeMode.system:
      return ThemeMode.system;
  }
}

This approach is useful for settings screens.

---

Building a Theme Settings Screen

A settings screen could contain:

Appearance

○ Light
○ Dark
○ System Default

For example:

ListTile(
  title: const Text('Dark Mode'),
  trailing: Switch(
    value: Theme.of(context).brightness == Brightness.dark,
    onChanged: (value) {
      // Change theme
    },
  ),
)

You can also use a dropdown:

DropdownButton<ThemeMode>(
  value: themeMode,
  items: const [
    DropdownMenuItem(
      value: ThemeMode.light,
      child: Text('Light'),
    ),
    DropdownMenuItem(
      value: ThemeMode.dark,
      child: Text('Dark'),
    ),
    DropdownMenuItem(
      value: ThemeMode.system,
      child: Text('System'),
    ),
  ],
  onChanged: (value) {
    // Update theme
  },
)

---

How to Persist the User’s Theme Preference

One common problem is that the selected theme disappears after the application is closed.

For example:

1. User selects Dark Mode.
2. User closes the application.
3. User opens it again.
4. The app returns to Light Mode.

This happens because the selection was only stored in memory.

To solve this, save the preference locally.

A commonly used approach is shared_preferences.

Add it to your project:

dependencies:
  shared_preferences: ^2.5.3

Then save the selected theme.

final prefs = await SharedPreferences.getInstance();

await prefs.setBool('isDarkMode', true);

Read it when the application starts:

final prefs = await SharedPreferences.getInstance();

final isDarkMode =
    prefs.getBool('isDarkMode') ?? false;

Then:

themeMode = isDarkMode
    ? ThemeMode.dark
    : ThemeMode.light;

This allows the application to remember the user’s preference.

Always check the current package version before adding a dependency to a production project.

---

Better Architecture for Real Flutter Applications

For a production Flutter application, avoid keeping all theme logic inside main.dart.

A cleaner structure could be:

lib/
│
├── main.dart
│
├── core/
│   └── theme/
│       ├── app_theme.dart
│       ├── light_theme.dart
│       ├── dark_theme.dart
│       └── theme_controller.dart
│
├── screens/
│   ├── home/
│   └── settings/
│
└── widgets/

This makes your application easier to maintain as it grows.

---

Creating a Central Theme File

You can create:

class AppTheme {
  static ThemeData light = ThemeData(
    brightness: Brightness.light,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
      brightness: Brightness.light,
    ),
  );

  static ThemeData dark = ThemeData(
    brightness: Brightness.dark,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
      brightness: Brightness.dark,
    ),
  );
}

Then:

MaterialApp(
  theme: AppTheme.light,
  darkTheme: AppTheme.dark,
  themeMode: ThemeMode.system,
)

This is simple and scalable.

---

Theming Text

Avoid manually defining text colors everywhere.

Instead of:

Text(
  'Welcome',
  style: TextStyle(
    color: Colors.black,
  ),
)

use:

Text(
  'Welcome',
  style: Theme.of(context).textTheme.titleLarge,
)

You can customize your text theme:

textTheme: const TextTheme(
  headlineLarge: TextStyle(
    fontSize: 32,
    fontWeight: FontWeight.bold,
  ),
  titleLarge: TextStyle(
    fontSize: 22,
    fontWeight: FontWeight.w600,
  ),
  bodyLarge: TextStyle(
    fontSize: 16,
  ),
)

This ensures typography remains consistent throughout the application.

---

Theming Buttons

Instead of customizing every button separately:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,
  ),
  onPressed: () {},
  child: const Text('Continue'),
)

define the button style globally:

elevatedButtonTheme: ElevatedButtonThemeData(
  style: ElevatedButton.styleFrom(
    minimumSize: const Size(double.infinity, 50),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
),

Now all ElevatedButton widgets can follow the application’s design system.

---

Theming Input Fields

Text fields are another important part of theme design.

You can define:

inputDecorationTheme: InputDecorationTheme(
  filled: true,
  border: OutlineInputBorder(
    borderRadius: BorderRadius.circular(12),
  ),
)

Then use:

TextField(
  decoration: const InputDecoration(
    hintText: 'Enter your name',
  ),
)

The appearance will automatically follow the current theme.

---

Theming Cards

You can globally configure cards:

cardTheme: const CardThemeData(
  elevation: 2,
  margin: EdgeInsets.all(8),
)

For dark mode, you can provide a different surface color.

cardTheme: const CardThemeData(
  color: Color(0xFF1E1E1E),
)

---

Avoid Hardcoded Colors

One of the biggest mistakes developers make when implementing dark mode is using hardcoded colors everywhere.

For example:

Text(
  'Hello',
  style: TextStyle(
    color: Colors.black,
  ),
)

This can become problematic in dark mode.

Prefer:

Text(
  'Hello',
  style: TextStyle(
    color: Theme.of(context).colorScheme.onSurface,
  ),
)

Similarly, instead of:

Colors.white

consider:

Theme.of(context).colorScheme.surface

or another appropriate semantic color.

---

Use Semantic Colors

A strong theme system should describe what a color is used for, rather than simply storing colors such as “blue” or “black.”

For example:

Primary
Secondary
Background
Surface
Error
On Primary
On Surface
On Error

This makes your design system easier to understand.

For example:

final colorScheme = Theme.of(context).colorScheme;

Container(
  color: colorScheme.surface,
)

The widget does not need to know whether the surface is white, gray, or nearly black.

---

Dark Mode Is More Than Changing Black and White

A professional dark theme should not simply invert colors.

A good dark theme considers:

• Contrast
• Text readability
• Surface hierarchy
• Borders
• Shadows
• Icons
• Images
• Input fields
• Navigation
• Dialogs
• Error states
• Disabled states

For example, using pure black everywhere can sometimes make an interface feel harsh.

A layered dark palette can be more comfortable:

Background: #121212
Surface:    #1E1E1E
Card:       #242424
Border:     #333333
Primary:    Brand Color
Text:       Light Gray / White

The exact values should depend on your application’s brand and accessibility requirements.

---

Detecting the Current Theme

Sometimes you need to know whether the application is currently using dark mode.

Use:

final brightness = Theme.of(context).brightness;

Then:

if (brightness == Brightness.dark) {
  // Dark theme
} else {
  // Light theme
}

You can also write:

final isDark =
    Theme.of(context).brightness == Brightness.dark;

Then:

Icon(
  isDark
      ? Icons.light_mode
      : Icons.dark_mode,
)

---

Theme-Aware Images and Icons

Images can also require special treatment.

For example, a black logo may look excellent in light mode but disappear in dark mode.

You can use different assets:

Image.asset(
  isDark
      ? 'assets/images/logo_dark.png'
      : 'assets/images/logo_light.png',
)

Similarly, icons can use theme colors:

Icon(
  Icons.settings,
  color: Theme.of(context).colorScheme.onSurface,
)

This makes the interface more consistent.

---

Theme Switching With GetX

If your Flutter application uses GetX, theme management can be centralized in a controller.

Example:

class ThemeController extends GetxController {

  final isDarkMode = false.obs;

  void toggleTheme() {
    isDarkMode.value = !isDarkMode.value;

    Get.changeThemeMode(
      isDarkMode.value
          ? ThemeMode.dark
          : ThemeMode.light,
    );
  }
}

Then your GetMaterialApp can define:

GetMaterialApp(
  theme: LightTheme.theme,
  darkTheme: DarkTheme.theme,
  themeMode: ThemeMode.system,
)

And from the UI:

IconButton(
  onPressed: () {
    Get.find<ThemeController>().toggleTheme();
  },
  icon: const Icon(Icons.dark_mode),
)

This approach is particularly useful in larger GetX-based applications.

---

Theme Switching With Provider, Riverpod, or Bloc

The same concept can be implemented with different state-management solutions.

For example:

Flutter setState
      ↓
Provider
      ↓
Riverpod
      ↓
Bloc/Cubit
      ↓
GetX

The important concept remains the same:

User Action
    ↓
Update Theme State
    ↓
Change ThemeMode
    ↓
MaterialApp/GetMaterialApp
    ↓
Rebuild UI

Choose the state-management approach that matches the architecture of your application.

---

Common Theme Implementation Mistakes

1. Hardcoding Colors

Avoid:

Colors.white
Colors.black

everywhere.

Use theme colors whenever possible.

---

2. Creating Different Colors for Every Widget

Do not create hundreds of unrelated colors.

Instead, build a small and consistent design system.

---

3. Ignoring Text Contrast

A color combination may look attractive but still be difficult to read.

Always consider accessibility and contrast.

---

4. Forgetting Dialogs and Bottom Sheets

Dark mode should apply consistently to:

• Dialogs
• Bottom sheets
• Menus
• Snackbars
• Forms
• Navigation

---

5. Not Testing System Theme

If your app supports:

ThemeMode.system

test it on both light and dark device settings.

---

6. Not Saving User Preferences

If users manually select a theme, consider remembering their selection.

---

Best Practices for Flutter Theme Design

Here are practical recommendations for production applications.

Use ColorScheme

Prefer semantic colors rather than random color values.

Keep Themes Centralized

Store theme definitions in dedicated files.

Avoid Hardcoded UI Colors

Use:

Theme.of(context)

and:

colorScheme

where appropriate.

Support System Theme

Give users the option to follow the operating system.

Make Dark Mode a First-Class Design

Don’t create dark mode as an afterthought.

Test Every Screen

Check:

• Home
• Login
• Signup
• Forms
• Lists
• Details
• Settings
• Dialogs
• Bottom sheets
• Empty states
• Error states

Keep Branding Consistent

Your primary brand color should generally work in both themes, while supporting colors may need adjustment.

---

Recommended Flutter Theme Architecture

For a professional application, you can use:

lib/
│
├── main.dart
│
├── core/
│   ├── theme/
│   │   ├── app_theme.dart
│   │   ├── light_theme.dart
│   │   ├── dark_theme.dart
│   │   └── theme_controller.dart
│   │
│   └── constants/
│       └── app_colors.dart
│
├── features/
│   ├── home/
│   ├── authentication/
│   └── settings/
│
└── widgets/

This structure makes it easier to maintain the design system as the application grows.

---

Example User Flow

A good theme experience might look like this:

User opens app
       ↓
App loads saved theme preference
       ↓
Preference exists?
    ↙        ↘
  Yes         No
   ↓           ↓
Use saved    Use system
theme         theme
       ↓
Display application
       ↓
User opens Settings
       ↓
Selects Dark Mode
       ↓
Theme changes instantly
       ↓
Save preference
       ↓
Next launch remembers Dark Mode

This creates a smooth and professional user experience.

---

Dark & Light Theme Checklist

Before releasing your Flutter application, check the following:

• Light theme is implemented
• Dark theme is implemented
• System theme is supported
• Theme switching works without restarting the app
• Theme preference is persisted when appropriate
• Text is readable in both themes
• Buttons work in both themes
• Text fields work in both themes
• Cards work in both themes
• Dialogs support both themes
• Bottom sheets support both themes
• Icons have sufficient contrast
• Images/logos work in both themes
• Error states work in both themes
• Empty states work in both themes
• Navigation components work in both themes
• Hardcoded colors have been reviewed
• The application has been tested on real devices

---

Final Thoughts

Implementing Dark and Light themes in Flutter is relatively simple because Flutter provides a powerful built-in theming system through ThemeData, ColorScheme, and ThemeMode.

The most important thing is not simply adding a dark-mode switch. A good theme architecture should be centralized, reusable, accessible, scalable, and easy to maintain.

For a small application, you can start with:

MaterialApp(
  theme: lightTheme,
  darkTheme: darkTheme,
  themeMode: ThemeMode.system,
)

As your application grows, move the theme definitions into dedicated files and introduce a theme controller or state-management solution. If users can manually select a theme, persist their choice so the application remembers it.

The best Flutter applications treat theming as part of the overall design system rather than as a collection of individual color changes. By using semantic ColorScheme values, centralized ThemeData, reusable component themes, and proper theme state management, you can create an application that feels polished in both Light and Dark Mode.

Frequently Asked Questions

Can Flutter support both Dark and Light Mode?

Yes. Flutter supports separate theme and darkTheme configurations through MaterialApp or GetMaterialApp.

How do I automatically follow the phone’s theme?

Use:

themeMode: ThemeMode.system

Flutter will follow the device’s configured appearance.

Can users manually switch between Light and Dark Mode?

Yes. Maintain the selected ThemeMode in application state and update it when the user changes the setting.

Can I save the selected theme?

Yes. You can store the preference locally using a persistence solution such as shared_preferences.

Should I use Colors.white and Colors.black?

Avoid using them throughout your UI when the color should respond to the active theme. Prefer semantic theme colors such as colorScheme.surface and colorScheme.onSurface.

Is Dark Mode difficult to implement in Flutter?

No. Flutter provides the core APIs needed to implement it. The more challenging part is designing a consistent, readable, and accessible color system for both themes.

---

Conclusion

Dark and Light Mode is an important feature for modern Flutter applications. With Flutter’s built-in theme system, you can create a consistent design, provide users with more control, and make your application comfortable to use in different environments.

Start with ThemeData, ColorScheme, and ThemeMode, avoid hardcoded colors, centralize your theme configuration, and test every screen in both modes. With these practices, your Flutter app can deliver a much more polished and professional user experience.