Support detection of light and dark system colors #164933

mdebbar · 2025-03-10T20:45:48Z

This PR is an enhancement to #163335 to provide detection of system colors for both light and dark mode. This is needed for the construction of a highContrastTheme and highContrastDarkTheme.

chunhtai

Can you talk a bit more about the changes about this pr? It looks like this pr attempt to detect color palette for both light and dart modes? I thought the browser should be able to know whether the system setting is right? In that case, shouldn't we only need to provide the color palette that matches the current browser setting?

chunhtai · 2025-03-10T21:44:00Z

engine/src/flutter/lib/ui/platform_dispatcher.dart

+final class SystemColorPalette {
+  SystemColorPalette._(this.brightness);
+
+  /// A palette of system colors for light mode.


will the value for light or dark change based on the light/dark setting of the browser?

No. The user can get both light and dark system colors, regardless of system brightness settings.

engine/src/flutter/lib/ui/platform_dispatcher.dart

mdebbar · 2025-03-11T14:38:37Z

Can you talk a bit more about the changes about this pr?

Sure! Let me explain the steps that got me here:

Before this PR, the browser was only providing "light" system colors. Even when I change my system to dark mode, the browser still gives us the same "light" colors.
I investigated and did some reading online and found out that we have to tell the browser which modes we support (light and dark). If we don't, the browser assumes that we only support light.
The way the MaterialApp widget works is by taking a highContrastTheme and highContrastDarkTheme (similar to how it takes a theme and darkTheme). And then it internally decides which one to use based on platformBrightness (which is provided by the system).
So I think the most convenient API for the user is to expose both light and dark system colors. That makes it possible to create a light theme and a dark theme and let MaterialApp switch between the two.

chunhtai

LGTM

auto-submit · 2025-03-11T20:03:10Z

autosubmit label was removed for flutter/flutter/164933, because - The status or check suite Linux analyze has failed. Please fix the issues identified (or deflake) before re-applying this label.

auto-submit · 2025-03-11T20:48:58Z

autosubmit label was removed for flutter/flutter/164933, because - The status or check suite Linux analyze has failed. Please fix the issues identified (or deflake) before re-applying this label.

…flutter#164933)

Support detection of light and dark system colors

285a946

mdebbar requested review from yjbanov and chunhtai March 10, 2025 20:45

github-actions bot added engine flutter/engine repository. See also e: labels. platform-web Web applications specifically labels Mar 10, 2025

chunhtai reviewed Mar 10, 2025

View reviewed changes

engine/src/flutter/lib/ui/platform_dispatcher.dart Show resolved Hide resolved

mdebbar added 3 commits March 11, 2025 11:00

add docs and make some changes

a4eda8b

enhance docs

fc0bd38

Merge branch 'main' into detect_light_and_dark

46810d0

mdebbar requested a review from chunhtai March 11, 2025 18:40

chunhtai approved these changes Mar 11, 2025

View reviewed changes

fix errors in example code

bb4b1a3

mdebbar added the autosubmit Merge PR when tree becomes green via auto submit App label Mar 11, 2025

auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Mar 11, 2025

fix more errors in example code

41da275

mdebbar added the autosubmit Merge PR when tree becomes green via auto submit App label Mar 11, 2025

auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Mar 11, 2025

no framework code in example

01b31e6

mdebbar added the autosubmit Merge PR when tree becomes green via auto submit App label Mar 12, 2025

auto-submit bot added this pull request to the merge queue Mar 12, 2025

Merged via the queue into flutter:master with commit 212f66f Mar 12, 2025
169 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Mar 12, 2025

mdebbar deleted the detect_light_and_dark branch March 12, 2025 17:16

engine-flutter-autoroll mentioned this pull request Mar 12, 2025

Roll Flutter from b16430b2fd57 to 212f66fbe74e (38 revisions) flutter/packages#8860

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 12, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

00bf20b

…flutter#164933)

engine-flutter-autoroll mentioned this pull request Mar 12, 2025

Roll Flutter from b16430b2fd57 to f0992e09655a (40 revisions) flutter/packages#8862

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 12, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

9872816

…flutter#164933)

engine-flutter-autoroll mentioned this pull request Mar 13, 2025

Roll Flutter from b16430b2fd57 to c6c518653c39 (56 revisions) flutter/packages#8865

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 13, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

94827cd

…flutter#164933)

engine-flutter-autoroll mentioned this pull request Mar 13, 2025

Roll Flutter from b16430b2fd57 to ea4cdcf39e93 (57 revisions) flutter/packages#8866

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 13, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

084ea95

…flutter#164933)

engine-flutter-autoroll mentioned this pull request Mar 13, 2025

Roll Flutter from b16430b2fd57 to 884de6185518 (58 revisions) flutter/packages#8867

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 13, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

7f1c5d5

…flutter#164933)

engine-flutter-autoroll mentioned this pull request Mar 13, 2025

Roll Flutter from b16430b2fd57 to 0a937ba4dafc (59 revisions) flutter/packages#8868

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 13, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

a36a0f2

…flutter#164933)

engine-flutter-autoroll mentioned this pull request Mar 13, 2025

Roll Flutter from b16430b2fd57 to 627f1d200bac (60 revisions) flutter/packages#8869

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 13, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

647eb3d

…flutter#164933)

engine-flutter-autoroll mentioned this pull request Mar 13, 2025

Roll Flutter from b16430b2fd57 to 0aa0ad160ed2 (61 revisions) flutter/packages#8870

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 13, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

109cc94

…flutter#164933)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 13, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

23317dd

…flutter#164933)

This was referenced Mar 13, 2025

Roll Flutter from b16430b2fd57 to c38f0b7aaee3 (63 revisions) flutter/packages#8871

Closed

Roll Flutter from b16430b2fd57 to 208883fe1256 (76 revisions) flutter/packages#8875

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 14, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

469209f

…flutter#164933)

engine-flutter-autoroll mentioned this pull request Mar 14, 2025

Roll Flutter from b16430b2fd57 to ca287b67e1a4 (77 revisions) flutter/packages#8876

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 14, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

dfc762f

…flutter#164933)

engine-flutter-autoroll mentioned this pull request Mar 14, 2025

Roll Flutter from b16430b2fd57 to 7df335fe447e (78 revisions) flutter/packages#8877

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 14, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

f465144

…flutter#164933)

Piinks mentioned this pull request Mar 14, 2025

Flutter Notable Commits - 2025 #161460

Open

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 15, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

b02d391

…flutter#164933)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 15, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

cb90319

…flutter#164933)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 16, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

7bed10c

…flutter#164933)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 16, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

f468c66

…flutter#164933)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 16, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

9a13544

…flutter#164933)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 17, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

e81bce5

…flutter#164933)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 20, 2025

212f66fbe Support detection of light and dark system colors (flutter/…

d3d75eb

…flutter#164933)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support detection of light and dark system colors #164933

Support detection of light and dark system colors #164933

mdebbar commented Mar 10, 2025

chunhtai left a comment

chunhtai Mar 10, 2025

mdebbar Mar 11, 2025

mdebbar commented Mar 11, 2025

chunhtai left a comment

auto-submit bot commented Mar 11, 2025

auto-submit bot commented Mar 11, 2025

Support detection of light and dark system colors #164933

Support detection of light and dark system colors #164933

Conversation

mdebbar commented Mar 10, 2025

chunhtai left a comment

Choose a reason for hiding this comment

chunhtai Mar 10, 2025

Choose a reason for hiding this comment

mdebbar Mar 11, 2025

Choose a reason for hiding this comment

mdebbar commented Mar 11, 2025

chunhtai left a comment

Choose a reason for hiding this comment

auto-submit bot commented Mar 11, 2025

auto-submit bot commented Mar 11, 2025