Binding the Flutter Theme

Bind the Wind theme to your MaterialApp so your app's Material defaults and Wind's utility-first styles stay consistent.

• Dynamic Binding
• Static Binding
• Customization Parameters
• Related Documentation

MaterialApp(
  theme: WindTheme.toThemeData(
    primarySwatch: Colors.blue,
    bodyFontString: 'Roboto',
    displayFontString: 'Lobster',
  ),
)

Wind exposes two ways to produce a ThemeData:

1. Dynamic Mode with WindTheme.toThemeCallback, which adapts to runtime changes such as light/dark mode transitions automatically.
2. Static Mode with WindTheme.toThemeData, which is simpler to set up but requires manual updates when the brightness changes at runtime.

WindTheme is a static class, so you call these methods directly on the type. There is no theme-data object or builder to instantiate.

Dynamic Binding

WindTheme.toThemeCallback updates the theme in response to runtime changes like light or dark mode toggling. It reads the brightness from the current BuildContext (or from the brightness you pass) and keeps the app in sync without manual intervention.

class MyApp extends StatelessWidget {
  final Widget Function(BuildContext) appCallback;

  const MyApp({super.key, required this.appCallback});

  @override
  Widget build(BuildContext context) {
    return appCallback(context);
  }
}

void main() {
  runApp(MyApp(
    appCallback: (context) {
      return MaterialApp(
        theme: WindTheme.toThemeCallback(
          context,
          primarySwatch: Colors.blue,
          bodyFontString: 'Roboto',
          displayFontString: 'Lobster',
        ),
      );
    },
  ));
}

toThemeCallback resolves the brightness from the context (via setTypeFromContext) unless you pass an explicit brightness, then delegates to toThemeData. This makes it the right choice for dynamic theme transitions.

Static Binding

If you do not need runtime adaptability, WindTheme.toThemeData is the simpler option. It applies the theme statically. When the brightness changes during runtime, update the theme manually by calling WindTheme.setType.

void main() {
  runApp(MaterialApp(
    theme: WindTheme.toThemeData(
      primarySwatch: Colors.green,
      bodyFontString: 'Open Sans',
      displayFontString: 'Pacifico',
      backgroundColor: Colors.grey.shade200,
      brightness: Brightness.light,
    ),
  ));
}

To switch to dark mode at runtime:

WindTheme.setType(Brightness.dark);

Calling setType regenerates Wind's darkened color set so the theme reflects the new brightness state.

Customization Parameters

Both toThemeData and toThemeCallback accept the same named parameters to customize the Material theme:

The defaults above are the ones toThemeData applies. toThemeCallback differs on two: it defaults textTheme to Theme.of(context).textTheme and resolves brightness from the current BuildContext (unless you pass an explicit value), which is what makes it adapt to runtime light/dark changes.

Choose the method that best fits your application's needs.

Related Documentation

• Get Started with Wind — install Wind and style your first widget.
• Dark Mode — how Wind handles brightness and color inversion.
• Colors — customize the palette toThemeData reads from.
• Font Family — set the body and display fonts.