Theming

Configure light and dark themes with FlutterWind using MaterialApp-compatible theme settings.

FlutterWind forwards theme configuration to the underlying MaterialApp, so you can use standard Flutter theming patterns directly.

Basic theme setup

Use theme, darkTheme, and themeMode on FlutterWind:

import 'package:flutter/material.dart';
import 'package:flutterwind_core/flutterwind.dart';

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

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

class _MyAppState extends State<MyApp> {
  ThemeMode themeMode = ThemeMode.system;

  @override
  Widget build(BuildContext context) {
    return FlutterWind(
      title: 'FlutterWind App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
        brightness: Brightness.light,
      ),
      darkTheme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.deepPurple,
          brightness: Brightness.dark,
        ),
        useMaterial3: true,
        brightness: Brightness.dark,
      ),
      themeMode: themeMode,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Theming'),
          actions: [
            IconButton(
              onPressed: () {
                setState(() {
                  themeMode = themeMode == ThemeMode.dark
                      ? ThemeMode.light
                      : ThemeMode.dark;
                });
              },
              icon: const Icon(Icons.brightness_6),
            ),
          ],
        ),
        body: Center(
          child: Container()
              .className('p-4 rounded-lg bg-white dark:bg-zinc-900 shadow'),
        ),
      ),
    );
  }
}

Theme mode options

  • ThemeMode.system: follows OS theme
  • ThemeMode.light: always light
  • ThemeMode.dark: always dark

Using utility classes with theme

Use dark variants to style widgets for dark mode:

Text('Hello FlutterWind').className(
  'text-zinc-900 dark:text-zinc-100',
);

You can combine this with your custom palette from flutterwind.yaml (see Configuration System).

Related pages

  • /getting-started/configuration
  • /getting-started/features
Edit this page
Features Overview
Key Flutterwind capabilities across styling, variants, and runtime tools.
Developer Tools
Enable the built-in FlutterWind developer overlay for FPS, memory, performance, logs, and diagnostics.