theme_config 0.1.1

Switch the status and navigation bars styles when the platform theme changes.

ThemeConfig makes it easy to switch the status and navigation bars styles when the platform theme changes.

Features

• Sets system bars' light and dark styles
• Updates system bars automatically when platform brightness changes
• Listens to theme mode changes

Getting started

Create a theme profile defining each style independently

final themeProfile = ThemeProfile(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  overlayStyle: SystemUiOverlayStyle.light,
  darkOverlayStyle: SystemUiOverlayStyle.dark,
);

Or based on color schemes

final themeProfile = ThemeProfile.fromColorScheme(
  colorScheme: ColorScheme.light(),
  darkColorScheme: ColorScheme.dark(),
  theme: (colorScheme) => ThemeData.from(colorScheme: colorScheme),
  overlayStyle: (colorScheme) => SystemUiOverlayStyle(...),
);

ThemeConfig must be initialized so it can save and load the theme mode preferences

Future<void> main() async {
  ...
  await ThemeConfig.init(themeProfile);
  runApp(MyApp());
}

Wrap the MaterialApp with the ThemeBuilder widget so it can listen to the platform brightness and theme mode changes and change the system bars accordingly

ThemeBuilder(
  builder: (theme) => MaterialApp(
    ...
    theme: theme.light,
    darkTheme: theme.dark,
    themeMode: theme.mode,
  ),
)

Usage

Access the app's brightness and theme mode anywhere in the project

final brightness = ThemeConfig.brightness;
final themeMode = ThemeConfig.themeMode;

Change between theme modes

ThemeConfig.setThemeMode(ThemeMode.light);
ThemeConfig.setThemeMode(ThemeMode.dark);
ThemeConfig.setThemeMode(ThemeMode.system);

• Example with radio list tile:

Widget myRadioListTile(ThemeMode themeMode) {
  return RadioListTile<ThemeMode>(
    title: Text(themeMode.name),
    value: themeMode,
    groupValue: ThemeConfig.themeMode,
    onChanged: (mode) => setState(() => ThemeConfig.setThemeMode(mode)),
  );
}

Column(children: ThemeMode.values.map(myRadioListTile).toList())

Dynamically redefine the overlay styles

ThemeConfig.setOverlayStyle(newOverlayStyle);
ThemeConfig.setDarkOverlayStyle(newDarkOverlayStyle);

Change the current overlay style

ThemeConfig.setCustomOverlayStyle(customOverlayStyle);

Remove the current overlay style

ThemeConfig.removeCustomOverlayStyle();

Temporarily change the light and/or dark overlay styles when on a specific page

OverlayStyle(
  light: newOverlayStyle,
  dark: newDarkOverlayStyle,
  child: ...
)

Or the custom overlay style

OverlayStyle.custom(
  style: customOverlayStyle,
  child: ...
)

For this widget to work you must also add our observer to the material app

MaterialApp(
  ...
  navigatorObservers: [ThemeConfig.routeObserver],
)

Additional information

If you notice any bugs not present in issues, please file a new issue. If you are willing to fix or enhance things yourself, you are very welcome to make a pull request.