Implementing Light and Dark Themes in Flutter

Introduction

Flutter theming lets you maintain a consistent look and feel across your app while supporting both light and dark modes. With its built-in ThemeData system, Flutter makes it easy to define colors, typography, and widget styles in one place. In this tutorial, you’ll learn the fundamentals of Flutter theming, theme switching, and theme management to provide a seamless UI experience that respects user preferences and system settings.

Defining Light and Dark Themes

Start by creating two ThemeData objects—one for light mode and one for dark mode. Place these definitions in a dedicated file (e.g., themes.dart) to keep your project organized.

import 'package:flutter/material.dart';

final ThemeData lightTheme = ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.blue,
  accentColor: Colors.orange,
  scaffoldBackgroundColor: Colors.white,
  textTheme: TextTheme(bodyText2: TextStyle(color: Colors.black87)),
);

final ThemeData darkTheme = ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.indigo[200],
  accentColor: Colors.tealAccent,
  scaffoldBackgroundColor: Colors.black,
  textTheme: TextTheme(bodyText2: TextStyle(color: Colors.white70)),
);

Close variants of Flutter theming—like theme switching and theme management—often reuse the same ThemeData approach. You can further customize colors, input decorations, icon themes, and more to match your brand.

Switching Themes Dynamically

To let users toggle between light and dark modes at runtime, you can manage the theme mode state with a simple ValueNotifier or a state management solution such as Provider, Riverpod, or GetX. Below is a minimal example using a ValueNotifier.

import 'package:flutter/material.dart';
import 'themes.dart'; // your theme definitions

void main() => runApp(AppRoot());

class AppRoot extends StatelessWidget {
  final ValueNotifier<ThemeMode> themeNotifier = ValueNotifier(ThemeMode.system);

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<ThemeMode>(
      valueListenable: themeNotifier,
      builder: (_, mode, __) {
        return MaterialApp(
          title: 'Flutter Theming Demo',
          theme: lightTheme,
          darkTheme: darkTheme,
          themeMode: mode,
          home: HomePage(themeNotifier: themeNotifier),
        );
      },
    );
  }
}

On your home page, add a simple switch in an AppBar or settings screen to flip the ThemeMode between light, dark, and system.

class HomePage extends StatelessWidget {
  final ValueNotifier<ThemeMode> themeNotifier;
  HomePage({required this.themeNotifier});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Switcher'),
        actions: [
          Switch(
            value: themeNotifier.value == ThemeMode.dark,
            onChanged: (isDark) {
              themeNotifier.value = isDark ? ThemeMode.dark : ThemeMode.light;
            },
          ),
        ],
      ),
      body: Center(child: Text('Hello, Flutter theming!')),
    );
  }
}

Applying Themes Across the App

By setting theme and darkTheme on MaterialApp along with a themeMode, Flutter automatically applies the correct theme based on user selection or system preferences. Widgets like AppBar, FloatingActionButton, Text, and Icon inherit colors from the active theme. For custom components, access theme values via Theme.of(context):

Container(
  padding: EdgeInsets.all(16),
  color: Theme.of(context).accentColor.withOpacity(0.2),
  child: Text(
    'Accent colored box',
    style: Theme.of(context).textTheme.bodyText2,
  ),
);

If you need to override specific widgets, wrap them in a Theme widget with a modified ThemeData.copyWith().

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

Implementing light and dark themes in Flutter involves defining ThemeData for each mode, wiring them into MaterialApp, and providing a mechanism for theme switching. By leveraging Flutter’s robust theming system, you ensure consistent styling, improve accessibility, and respect user preferences or system settings. These techniques—core to any theme management strategy—will help you build polished, production-ready applications.