Playground Guides

There are many useful Themes Playground guides released as thread posts on X/Twitter. You may find them helpful and easy to absorb.

ColorScheme Guide#

April 24, 2022

Slightly after the version 5 release, a tweet slide deck with 15 slides was released. It is an extensive guide to how the new Material-3 ColorScheme and color system work in Material-3 and Flutter.

A Theme Story#

May 17, 2023

This tweet thread story was released after version 7.1. and uses short screen recordings for a fictive theming use-case story. It demonstrates advanced features in the current version of FlexColorScheme and Themes Playground. It shows how to use custom brand colors, with a seed generation algorithm that gives brighter generated colors than the default M3 algorithm. The example locks down the brand colors to the fixed given brand colors. It uses the brand colors as seeds for all other supporting colors, except for critical ColorScheme colors. They use the exact given brand color values.

It also demonstrates how to use the in version 7.0 introduced platform adaptive theming properties. They are used in this example to create a theme that automatically looks less Material-3 opinionated and more platform-agnostic on other platforms than Android, while still using Material-3 on Android, where it is desired in this example. All this styling is done on theme level. The design changes are automatic depending on what platform the app is built for and run on.

The impact of the adaptive theme changes can be simulated in Themes Playground by faking the used platform. The adaptive theme responses can then be observed in the mock apps in the built-in Theme Simulator.

Platform-Agnostic Theme#

June 26, 2023

This tweet thread uses screenshots to demonstrate how to make a platform-agnostic Material-3 based theme. Widget color mapping and border radius are customized to make a custom style suitable on Android, iOS and desktop as well web. This serves as an example of how to make custom branded theme using Material-3 design in Flutter by simple visual styling adjustments with the Themes Playground, to give us the theme definition to copy and use in FlexColorScheme in our Flutter app.

This example uses a blue color seed generated ColorScheme, where the resulting scheme only uses different blue tones. The scheme is generated from a single seed color that is also used as the main "brand" color in light theme mode. This is also the only defined color to make this expressive blue theme, using multiple matching shades of blue in light and dark mode.

Theming Challenge#

Nov 11, 2023

In this tweet thread we study how and what parts of the design in https://ui.shadcn.com/themes can be made with Themes Playground. What more can be done by using APIs in FlexColorScheme not exposed in the Playground. Where you can go even further by modifying the produced ThemeData using .copyWith, is also discussed.

The Material widgets in Flutter are primarily designed to implement the Material components and currently focus on Material-3 design. The older Material-2 design will eventually be deprecated and removed from Flutter.

The Flutter implementation of Material components and their theming, allows you to customize the component styles a lot, but not everything is easy to do and it cannot be used to make any arbitrary design. The starting point of the design is also Material-3 or Material-2, depending on used mode in Flutter. In both cases, the styles are quite opinionated, Material-3 even more so. To make something very different, you have to change a lot of theming properties from their default behavior. FlexColorScheme makes this much easier and comes with a number of color designs that you can use as inspiration or base for your custom designs.

Greyscale Prototype#

Jan 15, 2024

For prototyping apps without color influences, you can try a greyscale theme. It works well with Material3 in FlutterDev and can look really cool. You can also make Flutter M3 apps look flatter and more platform agnostic. Meanwhile you can focus on features and content instead of spend time thinking about colors.

Later when you have your dope greyscale app's layouts and features nailed, you can for inspiration try it with all the different FlexColorScheme built-in colors as your app theme. This can help you find your look or just add the agreed brand colors to primary, secondary and tertiary colors.

One Color and Background Styles#

Feb 10, 2024

There are two different ways of using computational color scheme generation from just a single input color in FlexColorScheme. An FCS own way, that was used before Material-3 and of course Material-3 seed color generated ones. The M3 seed generated ColorScheme results can also be made very different from the Material-3 default one, the one we get with ColorScheme.fromSeed. In this tweet thread guide we look at both options in detail.

We also examine different ways we can tune the background and surface colors in a theme. Using Surface blend properties blend mode and level, or just M3 seed generated surface. M3 surfaces can also be customized and combined with blend level and mode if so desired.