adaptive_chameleon_theme 0.0.9 icon indicating copy to clipboard operation
adaptive_chameleon_theme: ^0.0.9 copied to clipboard

Adds support for managing theme modes (light, dark, system) and switching theme colors.

Adaptive Chameleon Theme #

A Flutter package that will automatically retrieve your OS defined Theme (Dynamic), force your prefered one (Light / Dark), allow you to present the user with a set of color themes to choose from and of course, persist this choice in your device.

Pub Version GitHub codecov

Features #

  • Set default theme
  • Override system theme mode and set yours (light/dark)
  • Change theme colors
  • Customize color palettes for different theme modes

Demo #

Click below to watch a quick demo.

Alt text

Getting started #

Add the following dependency to your pubspec.yaml

  adaptive_chameleon_theme: <latest_version>

Usage #

This package allows for an arbitrary number of themes to be defined. Each theme has a unique ID of type int. To create the themes and map them to IDs, first you have to create an instance of ThemeCollection, like so:

final themeCollection = ThemeCollection(
    themes: {
        0: ThemeData(primarySwatch:,
        1: ThemeData(primarySwatch:,
    fallbackTheme: ThemeData.light(), // optional fallback theme, default value is ThemeData.light()

I would however recommend you introduce a class with static const int values to associate a name to each ID value for easier reference:

class AppThemes {
    static const int LightBlue = 0;
    static const int LightRed = 1;
final themeCollection = ThemeCollection(
    themes: {
        AppThemes.LightBlue: ThemeData(primarySwatch:,
        AppThemes.LightRed: ThemeData(primarySwatch:,
    fallbackTheme: ThemeData.light(),
final darkThemeCollection = ThemeCollection(
    themes: {
        AppThemes.Blue: ThemeData(primarySwatch:,
        AppThemes.Red: ThemeData(primarySwatch:,
    fallbackTheme: ThemeData.dark(),

NOTE: Remember to define a collection of dark themes equivalent in number to the normal themes.

Proceed to wrap your MaterialApp with AdaptiveChameleonThemeWidget in order to apply and modify UI themes.

import 'package:example/themes.dart';
import 'package:flutter/material.dart';

import 'package:adaptive_chameleon_theme/adaptive_chameleon_theme.dart';

void main() {

class MyApp extends StatelessWidget {

  Widget build(BuildContext context) {
    return AdaptiveChameleonThemeWidget(
            themeCollection: AppThemes.themeCollection,
            darkThemeCollection: AppThemes.darkThemeCollection,
            defaultThemeId: AppThemes.aokiji, // optional, default id is 0
            builder: (context, theme, darkTheme, themeMode) {
              return MaterialApp(
                title: 'Flutter Demo',
                theme: theme,
                darkTheme: darkTheme,
                themeMode: themeMode,
                home: const MyHomePage(title: 'Adaptive Chameleon Theme'),

Changing Theme Mode #

You can utilise the changeThemeMode function from anywhere in your app. It provides a simple and straight forward way of altering the theme modes: light to dark, dark to light or to system default.

This function has two optional parameters: dynamic and dark. If the value of dynamic is true, it takes precedence over dark.

  // sets theme mode to dark
  AdaptiveChameleonTheme.of(context).changeThemeMode(dark: true);
  // sets theme mode to light
  AdaptiveChameleonTheme.of(context).changeThemeMode(dark: false);
  // sets theme mode to system default
  AdaptiveChameleonTheme.of(context).changeThemeMode(dynamic: true);

Changing Theme Color #

The theme can be set anywhere in the app, provided you have a BuildContext, e.g.:


By setting the theme, its ID is automatically saved via the shared_preferences package, so the next time the app starts, the theme can be restored automatically.

How to get the current theme #

Current app ThemeMode

  ThemeMode themeMode = AdaptiveChameleonTheme.of(context).themeMode;  

The above example will return a value of the enum used by MaterialApp's ThemeMode with one of the following values:

system - Use either the light or dark theme based on what the user has selected in the system settings.

light - Always use the light mode regardless of system preference.

dark - Always use the dark mode (if available) regardless of system preference.

Current app ThemeId

To get the ID of the current theme, for example to create a selection UI as done in the example app provided with this package, call

  final themeId = AdaptiveChameleonTheme.of(context).themeId;

Also Included #

The plugin contains some out-of-the-box widgets to make implementation easier.

ThemeModeSelectorWidget #

This is a toggle buttons widget that allows you to switch theme modes.

  const ThemeModeSelectorWidget()

ThemeColorSelectorWidget #

This is a toggle buttons widget that allows you to switch theme colors.

    themeCollection: AppThemes.themeCollection,
    selectedTheme: AdaptiveChameleonTheme.of(context).themeId,

Example #

The example app can be found in the example folder. It implements a dropdown menu to select between 5 themes. The app is the source for the video demo above.

Maintainer #

If you experience any problems using this package, please create an issue on Github. Pull requests are also welcome.

Acknowledgements #

Many thanks to the projects/packages below that served as inspiration for this undertaking:

Liked Adaptive Chameleon Theme?

Show some love and support by starring the repository.

Or You can

pub points


unverified uploader

Adds support for managing theme modes (light, dark, system) and switching theme colors.

Repository (GitHub)
View/report issues


API reference


Icon for licenses.MIT (LICENSE)


flutter, shared_preferences


Packages that depend on adaptive_chameleon_theme