Add support for generating a full `ColorScheme` from a single color #93463

darrenaustin · 2021-11-11T06:42:12Z

As part of the migration to Material 3, this PR adds a new APIs to make it easy to generate new Material 3 ColorSchemes from just a single color.

The design doc discusses this in more detail.

The new APIs are as follows:

`ColorScheme.fromSeed()`

You can construct a complete Material 3 ColorScheme derived from the tones of a single seed color with:

final lightScheme = ColorScheme.fromSeed(seedColor: Colors.green);
final darkScheme = ColorScheme.fromSeed(seedColor: Colors.green, brightness: Brightness.dark);

`ThemeData(Color colorSchemeSeed, ...)`

There is a new colorSchemeSeed parameter to the ThemeData factory constructor that will allow the app to generate the theme's color scheme from a seed color:

final lightTheme = ThemeData(colorSchemeSeed: Colors.orange, ...);
final darkTheme = ThemeData(colorSchemeSees: Colors.orange, brightness: Brightness.dark, ...);

Pre-launch Checklist

I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
I read the [Tree Hygiene] wiki page, which explains my responsibilities.
I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement].
I signed the [CLA].
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is [test-exempt].
All existing and new tests are passing.

darrenaustin · 2021-11-18T19:03:12Z

~~Note to reviewers, I broke this up into multiple commits to make it easier to review the addition of the dependency on material_color_utiltilies (7970178) and the new APIs (86c971b).~~

Updated so that the dependency changes went in with #94377, so this entire PR is just the new API changes.

rami-a

LGTM

packages/flutter/lib/src/material/theme_data.dart

HansMuller

This all looks generally good to me. We're going to need a really good migration guide.

packages/flutter/lib/fix_data.yaml

packages/flutter/lib/src/material/color_scheme.dart

HansMuller · 2021-11-23T17:30:39Z

packages/flutter/lib/src/material/color_scheme.dart

+  /// If any of the optional color parameters are non-null they will be
+  /// used in place of the generated colors for that field in the resulting
+  /// color scheme.
+  ///


Hopefully a fun interactive color-scheme generator example appears here...

It is on my list, but it would be a lot easier if we had a built in color picker... 😄

You could always use 3 or 4 sliders for a rough and ready color picker. Adding an example in a separate PR would be fine.

HansMuller · 2021-11-23T17:32:13Z

packages/flutter/lib/src/material/color_scheme.dart

+          brightness: brightness,
+        );
+    }
+  }

  /// Create a ColorScheme based on a purple primary color that matches the
  /// [baseline Material color scheme](https://material.io/design/color/the-color-system.html#color-theme-creation).
  const ColorScheme.light({


As with the basic constructor, best to refer to ColorScheme.fromSeed() here.

Not sure I get why here. If they are looking for a pre-built 'light' color scheme, why would they want to use fromSeed (other than to make sure they get a full color scheme), and what should they use for the seed color? This kind of points out the problem with not having a M3 version of this and dark.

I was thinking that it would be helpful to get apps off of ColorScheme.light(), since there isn't a perfect migration path that preserves the existing colors and adds new ones are comparable to what you'd get from ColorScheme.fromSeed(). Hopefully we can migrate developers that have used ColorScheme.light() to something like ColorScheme.fromSeed(seedColor: const Color(just the right purple seed color here). So for now we just remind them that the fromSeed factory is almost as trivial to write and so much more useful.

HansMuller · 2021-11-23T17:32:23Z

packages/flutter/lib/src/material/color_scheme.dart

+       _onInverseSurface = onInverseSurface,
+       _inversePrimary = inversePrimary,
+       _primaryVariant = primaryVariant,
+       _secondaryVariant = secondaryVariant;

  /// Create the recommended dark color scheme that matches the
  /// [baseline Material color scheme](https://material.io/design/color/dark-theme.html#ui-application).
  const ColorScheme.dark({


As with the basic constructor, best to refer to ColorScheme.fromSeed() here.

HansMuller · 2021-11-23T17:33:53Z

packages/flutter/lib/src/material/color_scheme.dart

+
+  /// Generate a [ColorScheme] based around the given `seedColor`.
+  ///
+  /// Using the seedColor as a starting point, a set of tonal palettes are


Is there a way to generate a high-contrast color scheme from a seed color? It would help to provide a path from all of the existing factories, to ColorScheme.fromSeed().

I didn't see an obvious way to do this with material_color_utilities, but @guidezpl would know.

Sorry for the late reply.. There isn't

darrenaustin · 2021-11-24T00:16:37Z

This all looks generally good to me. We're going to need a really good migration guide.

Thanks for the feedback. I have addressed most of your comments with 86c971b, let me know what you think.

A migration guide is next on my list, so I took notes from your comments here. Thx.

HansMuller

LGTM

You proposed breaking this into the package dependency and then the ColorScheme changes. That sounds like a good idea.

HansMuller · 2021-11-24T01:00:33Z

packages/flutter/lib/src/material/color_scheme.dart

+  /// If any of the optional color parameters are non-null they will be
+  /// used in place of the generated colors for that field in the resulting
+  /// color scheme.
+  ///


You could always use 3 or 4 sliders for a rough and ready color picker. Adding an example in a separate PR would be fine.

HansMuller · 2021-11-24T01:06:12Z

packages/flutter/lib/src/material/color_scheme.dart

+          brightness: brightness,
+        );
+    }
+  }

  /// Create a ColorScheme based on a purple primary color that matches the
  /// [baseline Material color scheme](https://material.io/design/color/the-color-system.html#color-theme-creation).
  const ColorScheme.light({


I was thinking that it would be helpful to get apps off of ColorScheme.light(), since there isn't a perfect migration path that preserves the existing colors and adds new ones are comparable to what you'd get from ColorScheme.fromSeed(). Hopefully we can migrate developers that have used ColorScheme.light() to something like ColorScheme.fromSeed(seedColor: const Color(just the right purple seed color here). So for now we just remind them that the fromSeed factory is almost as trivial to write and so much more useful.

…orScheme.fromSeed API.

packages/flutter/lib/src/material/color_scheme.dart

google-cla bot added the cla: yes label Nov 11, 2021

darrenaustin force-pushed the colorscheme_seed branch 2 times, most recently from 2dfe964 to 478229b Compare November 18, 2021 18:59

darrenaustin changed the title ~~WIP: API to generate a ColorScheme from a single seed color.~~ API to generate a ColorScheme from a single seed color. Nov 18, 2021

darrenaustin requested review from HansMuller, rami-a and guidezpl November 18, 2021 19:03

rami-a approved these changes Nov 18, 2021

View reviewed changes

guidezpl reviewed Nov 19, 2021

View reviewed changes

darrenaustin force-pushed the colorscheme_seed branch 2 times, most recently from 4ad5ca3 to 87689e4 Compare November 23, 2021 08:35

HansMuller reviewed Nov 23, 2021

View reviewed changes

darrenaustin force-pushed the colorscheme_seed branch from 87689e4 to 0b2d93f Compare November 24, 2021 00:10

darrenaustin force-pushed the colorscheme_seed branch from 0b2d93f to 86c971b Compare November 24, 2021 00:18

HansMuller approved these changes Nov 24, 2021

View reviewed changes

darrenaustin mentioned this pull request Nov 29, 2021

Added material_color_utilities as a dependency for flutter package. #94377

Merged

Added colorSchemeSeed parameter to the ThemeData constructor, and Col…

954447b

…orScheme.fromSeed API.

darrenaustin force-pushed the colorscheme_seed branch from 86c971b to 954447b Compare December 1, 2021 22:34

darrenaustin marked this pull request as ready for review December 1, 2021 22:35

guidezpl reviewed Dec 2, 2021

View reviewed changes

packages/flutter/lib/src/material/color_scheme.dart Show resolved Hide resolved

darrenaustin added the waiting for tree to go green label Dec 3, 2021

fluttergithubbot merged commit 8630315 into flutter:master Dec 3, 2021

jiyuujin mentioned this pull request Feb 4, 2022

2022/02/04 で喋ったこと Vol.183 jiyuujin/ohayo-developers#78

Open

triallax mentioned this pull request Feb 11, 2022

Improve theme handling Lacerte/clima#249

Open

darrenaustin mentioned this pull request Feb 23, 2022

☂️ Bring Material 3 to Flutter #91605

Closed

70 tasks

guidezpl changed the title ~~API to generate a ColorScheme from a single seed color.~~ Add support for generating a full ColorScheme from a single color Mar 30, 2022

guidezpl assigned darrenaustin May 23, 2022

guidezpl changed the title ~~Add support for generating a full ColorScheme from a single color~~ Add support for generating a full ColorScheme from a single color May 24, 2022

TahaTesser mentioned this pull request Apr 12, 2023

The primary color of the ThemeData is not equal to that of the color scheme value when using Brightness.dark and Material 3 #124319

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for generating a full `ColorScheme` from a single color #93463

Add support for generating a full `ColorScheme` from a single color #93463

darrenaustin commented Nov 11, 2021 •

edited

Loading

darrenaustin commented Nov 18, 2021 •

edited

Loading

rami-a left a comment

HansMuller left a comment

HansMuller Nov 23, 2021

darrenaustin Nov 23, 2021

HansMuller Nov 24, 2021

HansMuller Nov 23, 2021

darrenaustin Nov 24, 2021

HansMuller Nov 24, 2021

HansMuller Nov 23, 2021

HansMuller Nov 23, 2021

darrenaustin Nov 23, 2021

guidezpl Dec 2, 2021

darrenaustin commented Nov 24, 2021 •

edited

Loading

HansMuller left a comment

HansMuller Nov 24, 2021

HansMuller Nov 24, 2021

Add support for generating a full ColorScheme from a single color #93463

Add support for generating a full ColorScheme from a single color #93463

Conversation

darrenaustin commented Nov 11, 2021 • edited Loading

ColorScheme.fromSeed()

ThemeData(Color colorSchemeSeed, ...)

Pre-launch Checklist

darrenaustin commented Nov 18, 2021 • edited Loading

rami-a left a comment

Choose a reason for hiding this comment

HansMuller left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

darrenaustin commented Nov 24, 2021 • edited Loading

HansMuller left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Add support for generating a full `ColorScheme` from a single color #93463

Add support for generating a full `ColorScheme` from a single color #93463

darrenaustin commented Nov 11, 2021 •

edited

Loading

`ColorScheme.fromSeed()`

`ThemeData(Color colorSchemeSeed, ...)`

darrenaustin commented Nov 18, 2021 •

edited

Loading

darrenaustin commented Nov 24, 2021 •

edited

Loading