theme_patrol 2.0.1

Keep an eyes on your app theme changes and provides an easy way to change the color scheme

Keep an eyes on your app theme changes and provides an easy way to change the color scheme.

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) {
    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) {
    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) {
      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) {
    return 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) {
    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) {
                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) {
    return MaterialApp(
      title: 'ThemePatrol',
      theme: theme.data, // or theme.lightData
      home: Scaffold(
        appBar: AppBar(
          title: Text(ThemePatrol.of(context).name),
        ),
        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

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).name),
          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