Description:

theme patrol

Keep an eyes on your app theme changes, comes with a powerful set of tools to manage multiple themes with or without theme mode.

Demo
Features #

Switch between light/dark mode
Switch between multiple themes
Override current theme color

Usage #
To read more about classes and other references used by theme_patrol, see the API Reference.
Basic usage #
// configuring
ThemePatrol(
initialMode: ThemeMode.system,
light: ThemeData(
brightness: Brightness.light,
colorSchemeSeed: Colors.purple,
),
dark: ThemeData(
brightness: Brightness.dark,
colorSchemeSeed: Colors.purple,
toggleableActiveColor: Colors.purple,
),
builder: (context, theme, child) {
return MaterialApp(
title: 'ThemePatrol',
theme: theme.data, // or theme.lightData
darkTheme: theme.darkData,
themeMode: theme.mode,
home: HomePage(),
);
},
);

// consuming
ThemeController theme = ThemePatrol.of(context);
ThemeController theme = ThemeProvider.of(context);
ThemeConsumer(
builder: (context, theme, child) {
return Container();
},
);
copied to clipboard
Verbose usage #
// configuring
ThemeProvider(
controller: ThemeController(
initialMode: ThemeMode.system,
light: ThemeData(
brightness: Brightness.light,
colorSchemeSeed: Colors.purple,
),
...
),
child: ThemeConsumer(
builder: (context, theme, child) {
return MaterialApp(
title: 'ThemePatrol',
theme: theme.data, // or theme.lightData
darkTheme: theme.darkData,
themeMode: theme.mode,
home: HomePage(),
);
},
),
);

// consuming
ThemeController theme = ThemeProvider.of(context);
ThemeConsumer(
builder: (context, theme, child) {
return child;
},
child: Container(),
);
copied to clipboard
Provider usage #
To read more about classes and other references used by provider, see their API Reference.
// configuring
ChangeNotifierProvider(
create: (_) => ThemeController(
initialMode: ThemeMode.system,
...
),
child: ...
);

// consuming
ThemeController theme = Provider.of<ThemeController>(context, listen: true|false);
ThemeController theme = context.watch<ThemeController>();
ThemeController theme = context.read<ThemeController>();
ThemeMode mode = context.select((ThemeController theme) => theme.mode);
Consumer<ThemeController>(
builder: (_, theme, child) {
return Foo();
},
child: Baz(),
);
copied to clipboard
Use Case #
Only switch between light/dark mode #
ThemePatrol(
initialMode: ThemeMode.system,
light: ThemeData(
brightness: Brightness.light,
colorSchemeSeed: Colors.purple,
),
dark: ThemeData(
brightness: Brightness.dark,
colorSchemeSeed: Colors.purple,
toggleableActiveColor: Colors.purple,
),
builder: (context, theme, child) {
return MaterialApp(
title: 'ThemePatrol',
theme: theme.data, // or theme.lightData
darkTheme: theme.darkData,
themeMode: theme.mode,
home: Scaffold(
appBar: AppBar(
title: Text(ThemePatrol.of(context).mode.toString()),
actions: [
ThemeConsumer(
builder: (context, theme, child) {
return Switch(
value: theme.isDarkMode,
onChanged: (selected) {
if (selected) {
theme.toDarkMode();
} else {
theme.toLightMode();
}
},
);
},
),
],
),
),
);
},
);
copied to clipboard
Multiple theme without dark mode #
ThemePatrol(
initialTheme: 'amber',
themes: {
'purple': ThemeConfig.fromColor(Colors.purple),
'pink': ThemeConfig.fromColor(Colors.pink),
'amber': ThemeConfig.fromColor(Colors.amber),
'elegant': ThemeConfig(data: ThemeData()),
},
builder: (context, theme, child) {
return MaterialApp(
title: 'ThemePatrol',
theme: theme.data, // or theme.lightData
home: Scaffold(
appBar: AppBar(
title: Text(ThemePatrol.of(context).selected),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ThemeConsumer(
builder: (context, theme, _) {
return Wrap(
spacing: 5,
children: theme.availableEntries
.map((e) => ActionChip(
label: Text(e.key),
onPressed: () => theme.select(e.key),
avatar: CircleAvatar(
backgroundColor:
e.value.colorSchemeOf(context).primary,
),
))
.toList(),
);
},
),
],
),
),
),
);
},
);
copied to clipboard
Multiple theme with dark mode #
ThemePatrol(
initialTheme: 'amber',
initialMode: ThemeMode.system,
themes: {
'purple': ThemeConfig.fromColor(Colors.purple),
'pink': ThemeConfig.fromColor(Colors.pink),
'amber': ThemeConfig.fromColor(Colors.amber),
'basic': ThemeConfig(data: ThemeData()),
'pro': ThemeConfig(data: ThemeData(), dark: ThemeData()),
'premium': ThemeConfig(light: ThemeData(), dark: ThemeData()),
},
builder: (context, theme, _) {
return MaterialApp(
title: 'ThemePatrol',
theme: theme.data, // or theme.lightData
darkTheme: theme.darkData,
themeMode: theme.mode,
home: Scaffold(
appBar: AppBar(
title: Text(ThemePatrol.of(context).selected),
actions: [
ThemeConsumer(
builder: (context, theme, _) {
return Switch(
value: theme.isDarkMode,
onChanged: (selected) {
if (selected) {
theme.toDarkMode();
} else {
theme.toLightMode();
}
},
);
},
),
],
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ThemeConsumer(
builder: (context, theme, _) {
return Wrap(
spacing: 5,
children: theme.available.entries
.map((e) => ActionChip(
label: Text(e.key),
onPressed: () => theme.select(e.key),
avatar: CircleAvatar(
backgroundColor:
e.value.colorSchemeOf(context).primary,
),
))
.toList(),
);
},
),
],
),
),
),
);
},
);
copied to clipboard
Sponsoring #


If this package or any other package I created is helping you, please consider to sponsor me so that I can take time to read the issues, fix bugs, merge pull requests and add features to these packages.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter