Why ThemeProvider?

• Seamless integration with MaterialApp and CupertinoApp.
• Effortless multi-theme management.
• Simplifies triggering theme changes.
• Full control with dark, light, system, next, previous, and toggle.
• Ability to persist selected theme.

Demo: Theme Provider.

Usage

Wrap your XApp with ThemeProvider:

class YourApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ThemeProvider(
      theme: YourMaterialAppTheme(), // Or DefaultMaterialAppTheme
      builder: (theme) => MaterialApp(
        title: title,
        theme: theme,
        home: YourHomePage(),
      ),
    );
  }
}

• ThemeProvider handles darkTheme and themeMode in MaterialApp

Changing Theme

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).index = themeIndex;

Create Your Themes

class YourMaterialAppTheme extends AppTheme<ThemeData> {
    YourMaterialAppTheme() : super(light, dark);

    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,
    );
}

CupertinoApp?

Just use DefaultCupertinoTheme or define yours.

class YourApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ThemeProvider(
      theme: YorCupertinoAppTheme(),
      builder: (theme) => CupertinoApp(
        title: title,
        theme: theme,
        home: YourHomePage(),
      ),
    );
  }
}

Listen to the changes

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

Or react on UI:

ValueListenableBuilder(
  valueListenable: ThemeProvider.of(context).changeNotifier,
  ...
);

More?

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

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

// get or set current theme index?
ThemeProvider.of(context).index;

// persistence ability?
ThemeProvider.of(context).jsonString;
ThemeProvider(
  init: jsonString,
  builder: ...
);

// multi-theme?
ThemeProvider(
  themes: YourThemesList,
  builder: ...
);
// and call next or previous to change theme.

Liked Cross Theme Provider?

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

Future

• Download and install themes!