Skip to content

Support detection of light and dark system colors #164933

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
auto-submit merged 7 commits into from
Mar 12, 2025
Merged

Support detection of light and dark system colors #164933

auto-submit merged 7 commits into from
Mar 12, 2025
+216 −159

Conversation

@mdebbar
Copy link
Contributor

@mdebbar mdebbar commented Mar 10, 2025

Part of #118853

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.

@mdebbar mdebbar requested review from chunhtai and yjbanov March 10, 2025 20:45
@github-actions github-actions bot added engine flutter/engine related. See also e: labels. platform-web Web applications specifically labels Mar 10, 2025
chunhtai
chunhtai reviewed Mar 10, 2025
View reviewed changes
Copy link
Contributor

@chunhtai chunhtai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

engine/src/flutter/lib/ui/platform_dispatcher.dart Outdated
final class SystemColorPalette {
SystemColorPalette._(this.brightness);

/// A palette of system colors for light mode.
Copy link
Contributor

@chunhtai chunhtai Mar 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@mdebbar mdebbar Mar 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

chunhtai
chunhtai reviewed Mar 10, 2025
View reviewed changes
@mdebbar
Copy link
Contributor Author

mdebbar commented Mar 11, 2025

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

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

  1. 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.
  2. 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.
  3. 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).
  4. 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.

@mdebbar mdebbar requested a review from chunhtai March 11, 2025 18:40
chunhtai
chunhtai approved these changes Mar 11, 2025
View reviewed changes
Copy link
Contributor

@chunhtai chunhtai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@mdebbar mdebbar added the autosubmit Merge PR when tree becomes green via auto submit App label Mar 11, 2025
@auto-submit auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Mar 11, 2025
@auto-submit
Copy link
Contributor

auto-submit bot commented Mar 11, 2025

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.

@mdebbar mdebbar added the autosubmit Merge PR when tree becomes green via auto submit App label Mar 11, 2025
@auto-submit auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Mar 11, 2025
@auto-submit
Copy link
Contributor

auto-submit bot commented Mar 11, 2025

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.

@mdebbar mdebbar added the autosubmit Merge PR when tree becomes green via auto submit App label Mar 12, 2025
@auto-submit 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 flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Mar 12, 2025
@mdebbar mdebbar deleted the detect_light_and_dark branch March 12, 2025 17:16
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Mar 12, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 12, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
00bf20b 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 16, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
f468c66 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 16, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
9a13544 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 17, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
e81bce5 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 20, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
d3d75eb 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 25, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
16dcb41 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 25, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
5fc6040 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 26, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
9e16e76 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 26, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
15740cc 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 26, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
50cc1d2 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 26, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
4a018c3 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 26, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
dd04491 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 26, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
f0f07dd 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 26, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
311fe7e 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 26, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
b71bbe1 
…utter#164933)
github-merge-queue bot pushed a commit that referenced this pull request Mar 26, 2025
@mdebbar
High contrast color scheme based on system forced colors (#165068)
d5751be 
This PR introduces a `bool useSystemColors` parameter to the `ThemeData`
constructor.

The goal from this PR is to enable users to easily create high contrast
themes that are based on system colors for their `MaterialApp`:

```dart
MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  highContrastTheme: ThemeData(useSystemColors: true, ...),
  highContrastDarkTheme: ThemeData(useSystemColors: true, ...),
)
```
The `MaterialApp` widget will automatically pick the correct one of the
4 themes based on system settings (light/dark mode, high contrast
enabled/disabled).

Depends on #164933
Closes #118853
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 27, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
da6b254 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 27, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
b6db3d7 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 27, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
81abbda 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 27, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
bfcbb55 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 27, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
24ce24f 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 27, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
9bc6b69 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 27, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
6ca4681 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 27, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
3de0cea 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 28, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
2c11d32 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 20, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
b8f58c1 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 20, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
5bd225e 
…utter#164933)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 21, 2025
@engine-flutter-autoroll
212f66f Support detection of light and dark system colors (flutter/fl…
5c08c3f 
…utter#164933)
zhangyuang pushed a commit to zhangyuang/flutter-fork that referenced this pull request Jun 9, 2025
@mdebbar
High contrast color scheme based on system forced colors (flutter#165068
020968a 
)

This PR introduces a `bool useSystemColors` parameter to the `ThemeData`
constructor.

The goal from this PR is to enable users to easily create high contrast
themes that are based on system colors for their `MaterialApp`:

```dart
MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  highContrastTheme: ThemeData(useSystemColors: true, ...),
  highContrastDarkTheme: ThemeData(useSystemColors: true, ...),
)
```
The `MaterialApp` widget will automatically pick the correct one of the
4 themes based on system settings (light/dark mode, high contrast
enabled/disabled).

Depends on flutter#164933
Closes flutter#118853
romanejaquez pushed a commit to romanejaquez/flutter that referenced this pull request Aug 14, 2025
@mdebbar @romanejaquez
Support detection of light and dark system colors (flutter#164933)
2d0339c 
Part of flutter#118853

This PR is an enhancement to
flutter#163335 to provide detection of
system colors for both light and dark mode. This is needed for the
construction of a
[`highContrastTheme`](https://api.flutter.dev/flutter/material/MaterialApp/highContrastTheme.html)
and
[`highContrastDarkTheme`](https://api.flutter.dev/flutter/material/MaterialApp/highContrastDarkTheme.html).
romanejaquez pushed a commit to romanejaquez/flutter that referenced this pull request Aug 14, 2025
@mdebbar @romanejaquez
High contrast color scheme based on system forced colors (flutter#165068
c80a126 
)

This PR introduces a `bool useSystemColors` parameter to the `ThemeData`
constructor.

The goal from this PR is to enable users to easily create high contrast
themes that are based on system colors for their `MaterialApp`:

```dart
MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  highContrastTheme: ThemeData(useSystemColors: true, ...),
  highContrastDarkTheme: ThemeData(useSystemColors: true, ...),
)
```
The `MaterialApp` widget will automatically pick the correct one of the
4 themes based on system settings (light/dark mode, high contrast
enabled/disabled).

Depends on flutter#164933
Closes flutter#118853
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@chunhtai chunhtai chunhtai approved these changes

@yjbanov yjbanov Awaiting requested review from yjbanov

Assignees

No one assigned

Labels

engine flutter/engine related. See also e: labels. platform-web Web applications specifically

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@mdebbar @chunhtai