Welcome to FlexColorScheme

August 16, 2023: Version 7.3 is now available on pub.dev. It supports changed Material-3 theming features in Flutter 3.13. A new version of the Themes Playground companion app has also been released. See the what's new chapter for more info.

flutter favorite logo

Use FlexColorScheme to make beautiful Flutter Material Design themes. Apply optional surface blends, or use Material-3 style seeded color schemes. The returned themes are standard ThemeData objects, but very sophisticated ones. They are based on the same idea as Flutter's ThemeData.from(ColorScheme) themes, but with many additional features. Choose from numerous pre-made designs or make your own. You can also use optional component sub theming, that are quick and easy to configure.

If you use FlexColorScheme and Themes Playground, consider staring ️ the repo on GitHub. You don't have to, but it is a simple free endorsement that may give me some GitHub perks. I'm happy if you like 👍 it on pub.dev too. Thank you! 😃🙏
Dash light
Dash dark
M3 baseline light
M3 baseline dark

When you theme a Flutter application correctly, all built-in widgets use the colors of the ColorScheme in your theme. At least in theory, and it is almost so if you defined your ThemeData by using the ThemeData.from factory, but it misses a few details.

FlexColorScheme ensures that all Flutter SDK UI components get themed completely by its color schemes and custom colors you provide. It applies effective ColorScheme colors to all color properties in ThemeData. This ensures that all the direct colors properties in ThemeData match your ColorScheme. There are no surprises in ThemeData that do not match your ColorScheme.

Verdun green light
Verdun green dark
Dell genoa light
Dell genoa dark

You can opt in on using opinionated component sub-themes. By doing so, you can, for example, adjust the border radius on all UI widgets with a single property value. Flutter's Material UI widgets still default to the Material-2 design, and thus use 4dp border radius on most widgets.

When you opt in on using the component sub-themes, border radius on widgets defaults to the new Material-3 rounded corner design. In it, the radius varies by widget type, as specified by the Material 3 guide. One could say that opting in on using FlexColorScheme component sub themes in the Material 2 mode, is a way of getting a Material 2 design of Material 3. You can keep this or set the shared global widget radius to a value you prefer. You can also easily set the themed border radius per widget, and override the Material 3 default or the global radius value you defined.

Material 3 Support#

You can also opt in on using Material-3 design. The Material-3 mode component sub-theming is far less opinionated, using mostly Material-3 defaults. It offers many quick settings to customize Material-3 to fit your custom design goals.

In Flutter 3.7 and later, using Material-3 design is ready for production use. Some minor issues still exist, please refer to the FlexColorScheme docs known issues chapter for more information on status of known theming issues in Flutter.

Yukon gold light
Yukon gold dark
Rust light
Rust dark

FlexColorScheme has many advanced coloring features, like using surface alpha blends. It also fully supports Material 3 based color schemes, including seed generated ColorSchemes. It offers different configuration options that you can use when you generate your ColorScheme from key colors. You can use this to make more saturated seed generated themes and themes with higher contrast. The advanced seeded ColorScheme features are currently not available in Flutter directly. This includes using multiple key colors as seeds, custom minimum chroma levels and customized tone mapping to ColorScheme colors.

In Material-3 mode theming you can disable its surface elevation tint and even bring back elevation shadows where they are removed in M3. You can choose to do this adaptively on only selected platforms, like iOS and macOS, where surface tint elevation may seem foreign, while still keeping the M3 tinted elevation styles when the app is used on Android.

Indigo San Marino light
Indigo San Marino dark
Lipstick pink light
Lipstick pink dark

With FlexColorScheme component themes, you use simple flat property values. No need for verbose Flutter SDK component sub-themes, with ShapeBorder definitions on multiple widget themes to change their border radius. The component theming provides a large number of easy to configure options via simple flat properties. In many cases you can avoid the both complicated and confusing MaterialState theming properties.