theme_patrol

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.