Intuitive Theme Provider

Support for light and dark theme in your Flutter app and define your custom themes.

Usage

Wrap your XApp with ThemeProvider:

import 'package:theme_provider/theme_provider.dart';

class YourApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ThemeProvider(
      themes: DefaultMaterialTheme(),
      builder: (theme) => MaterialApp(
        title: 'Demo App',
        theme: theme,
        darkTheme: DefaultMaterialTheme.dark,
        home: YourHomePage(),
      ),
    );
  }
}

Changing Theme Mode

ThemeProvider.of(context).dark();

ThemeProvider.of(context).light();

ThemeProvider.of(context).system();

ThemeProvider.of(context).toggle();

ThemeProvider.of(context).next();

ThemeProvider.of(context).previous();

ThemeProvider.of(context).mode = ThemeService.darkMode;

Create Your Themes

class YourMaterialTheme extends AppTheme<ThemeData> {

    final static ThemeData light = ThemeData(
        useMaterial3: true,
        brightness: Brightness.light,
        colorSchemeSeed: Colors.purple,
    );

    final static ThemeData dark = ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        colorSchemeSeed: Colors.purple,
    );

    // Make a list of your themes
    @override
    List<ThemeData> themeList() => super.from(light, dark, rest: [other thems]);
}

CupertinoTheme?

Just use DefaultCupertinoTheme or define yours.

import 'package:theme_provider/theme_provider.dart';

class YourApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ThemeProvider(
      themes: DefaultCupertinoTheme(),
      builder: (theme) => CupertinoApp(
        title: 'Demo App',
        theme: theme,
        home: YourHomePage(),
      ),
    );
  }
}

Listen to the mode changes

ThemeProvider.of(context).changeNotifier.addListener(() {
  // do your thing, or
  // persist mode like pref.setX(key, ThemeProvider.of(context).mode)
});

Or react on UI:

ValueListenableBuilder(
  valueListenable: ThemeProvider.of(context).changeNotifier,
  builder: (_, mode, child) {
    // update your UI
  },
);

More?

// get current theme?
Theme.of(context);

// get current mode?
ThemeProvider.of(context).mode;

// get current mode name?
ThemeProvider.of(context).name;

// get name of a mode:
YourAppTheme.nameOf(mode); // e.g. DefaultCupertinoTheme().nameOf(mode)

Liked Cross Theme Provider?

Show some love, support by starring the repository, or you can

Future

Persists selected mode.