introduce system color palette#163335
Conversation
| /// See also: | ||
| /// | ||
| /// * https://drafts.csswg.org/css-color/#css-system-colors | ||
| static const List<String> systemColorNames = <String>[ |
There was a problem hiding this comment.
also is the name here a union between the possible choice between web and windows?
There was a problem hiding this comment.
The names are W3C standard names, so they are cross-platform. I think it makes sense for us to just adopt the W3C naming, because that will let us cover all platforms, and we won't need to invent our own standard.
There was a problem hiding this comment.
nvm, I misread some of the doc, I thought we may have this feature in native windows as well
There was a problem hiding this comment.
We might want to add it for Windows. I just didn't add it in this PR,.
There was a problem hiding this comment.
wait does native windows also have this feature? are you talking about this one? https://support.microsoft.com/en-us/windows/personalize-your-colors-in-windows-3290d30f-d064-5cfe-6470-2fe9c6533e37
Is it that these setting will somehow translate to <system-color> when user user the browser?
There was a problem hiding this comment.
I can only confirm that the "contrast themes" settings affect system color settings. Changing "accent color" doesn't seem to do anything.
| /// As of the current release, system colors are supported on web only. | ||
| /// | ||
| /// This is typically used in conjunction with | ||
| /// [AccessibilityFeatures.highContrast]. In particular, on Windows, when |
There was a problem hiding this comment.
this is for weindows web right?
There was a problem hiding this comment.
This is supported by all browsers on all operating systems. For example, I can get a list of system colors in Safari on macOS (in fact, you will notice that the test I added runs in all browsers on all operating systems).
There was a problem hiding this comment.
but is the windows web the only platform that user can set it without doing manually modifying the css?
There was a problem hiding this comment.
Correct. System colors is a general feature of being able to match your UI colors with system colors (https://blog.jim-nielsen.com/2021/css-system-colors/). However, on Windows the user can customize those colors.
|
Might could at least add a reference to related bug? |
Done. |
| /// See also: | ||
| /// | ||
| /// * https://drafts.csswg.org/css-color/#css-system-colors | ||
| static const List<String> systemColorNames = <String>[ |
There was a problem hiding this comment.
I always have a weird feeling these types of things should be Set just...on principle. But I know it just generates slightly slower code w/ no benefit. 🤷
There was a problem hiding this comment.
I'm actually starting to reconsider this list. Since the names are known and defined in the specification, I wonder if we should just make it an "enum" of sorts (it can't be literally enum because we detect their data dynamically).
There was a problem hiding this comment.
(it can't be literally enum because we detect their data dynamically).
Can you elaborate? I also prefer enum as the dart:ui API
There was a problem hiding this comment.
Enums need to be const, but SystemColor.value is computed by reading it dynamically from the browser. However, we can make it an almost-enum, similar to SemanticsAction.
3c26385 to
93c0a95
Compare
|
Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change). If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review. For more guidance, visit Writing a golden file test for Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing. |
| /// * https://drafts.csswg.org/css-color/#css-system-colors | ||
| /// * https://developer.mozilla.org/en-US/docs/Web/CSS/system-color | ||
| /// * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors | ||
| Map<String, SystemColor>? get systemColors => null; |
There was a problem hiding this comment.
Thanks for adding the support on the engine side. I will think about how we integrate this with framework themes.
| /// The color value used for the color named [name], if supported. | ||
| /// | ||
| /// If [isSupported] is false, the [value] is null. If [isSupported] is true, | ||
| /// tha [value] is not null. |
There was a problem hiding this comment.
Fly-by comment, this should be "the" ?
| /// tha [value] is not null. | ||
| final Color? value; | ||
|
|
||
| /// Whether the current platform supports a color with the give [name]. |
There was a problem hiding this comment.
Fly-by comment, this should be "the given [name]." ?
1106d0b to
8059814
Compare
|
Golden file changes are available for triage from new commit, Click here to view. For more guidance, visit Writing a golden file test for Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing. |
| /// See also: | ||
| /// | ||
| /// * https://drafts.csswg.org/css-color/#css-system-colors | ||
| static SystemColor get accentColor => throw _systemColorUnsupportedError(); |
There was a problem hiding this comment.
This seems slightly dangerous that it throw for non web platform. Should we make it nullable?
There was a problem hiding this comment.
The idea is that framework-side code would check platformProvidesSystemColors before accessing any of the colors. Alternatively, we could always return a SystemColor, but SystemColor.isSupported would return false.
| ]; | ||
|
|
||
| class SystemColorPaletteDetector { | ||
| SystemColorPaletteDetector() { |
There was a problem hiding this comment.
Do we have logic to reload these when system color override changes?
There was a problem hiding this comment.
No, but see my comment above. I don't know how to do it, but it also may not be important.
| double scaleFontSize(double unscaledFontSize); | ||
| } | ||
|
|
||
| final class SystemColor { |
There was a problem hiding this comment.
Same thing here, do we or should we have mechanism to get notification when system color change during the life time of an app?
There was a problem hiding this comment.
I'm not yet sure how to implement it. The only signal I can listen to is the forced-colors media query, but that doesn't notify about individual color changes, only about the high contrast switch overall. I think it might be fine for now though. I expect users will create a theme once, and then turn the high contrast mode on and off, which already send a notification.
|
overall looks good, just left some questions |
Manual roll Flutter from 39b4951 to 911aa75 (56 revisions) Manual roll requested by [email protected] flutter/flutter@39b4951...911aa75 2025-02-21 [email protected] Remove legacy scenec stuff from flutter_tool (flutter/flutter#163569) 2025-02-21 [email protected] [fuchsia] reorder tests in test_suites.yaml and update the comment (flutter/flutter#163799) 2025-02-21 [email protected] Roll Dart SDK from 7ceb3be8ed0a to c5e582f15b6c (2 revisions) (flutter/flutter#163844) 2025-02-21 [email protected] Roll Packages from a9b9172 to 5a721da (2 revisions) (flutter/flutter#163848) 2025-02-21 [email protected] Roll Dart SDK from ad642ee6f94b to 7ceb3be8ed0a (2 revisions) (flutter/flutter#163832) 2025-02-21 [email protected] Update how to use VSCode with `clangd` after the monorepo merge (flutter/flutter#163671) 2025-02-21 [email protected] Reland #163711 after #163780 (flutter/flutter#163812) 2025-02-21 [email protected] Fix incorrect function name in FlutterEngineRun documentation (flutter/flutter#163696) 2025-02-21 [email protected] Roll Dart SDK from 557cbf2c7da6 to ad642ee6f94b (5 revisions) (flutter/flutter#163794) 2025-02-21 [email protected] [canvaskit] Use `visualViewport.scale` to determine device pixel ratio. (flutter/flutter#163688) 2025-02-21 [email protected] [DisplayList] Migrate rendering tests and benchmarks to DL geometry (flutter/flutter#163766) 2025-02-21 [email protected] Make `releaseMode` explicit, inform `determineDevDependencies` entirely on the flag (flutter/flutter#163780) 2025-02-21 [email protected] Ensure `exclude_dev_dependencies_test` runs if `flutter_tools` changes. (flutter/flutter#163768) 2025-02-21 [email protected] WebKit should respect TextCapitalization.words (flutter/flutter#161027) 2025-02-21 [email protected] CupertinoSliverNavigationBar.search fidelity updates (flutter/flutter#163089) 2025-02-21 [email protected] feat: Add selectionColor property to selectable text (flutter/flutter#162177) 2025-02-20 [email protected] Restore `linux_android_emulator_tests` to CI. (flutter/flutter#163747) 2025-02-20 [email protected] introduce system color palette (flutter/flutter#163335) 2025-02-20 [email protected] [web] DRY up access to headers required for multi-threaded WebAssembly (flutter/flutter#163555) 2025-02-20 [email protected] fix(CupertinoDatePicker): font is inconsistent (flutter/flutter#162932) 2025-02-20 [email protected] Create Android-API-And-Related-Versions.md (flutter/flutter#163556) 2025-02-20 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Avoid implicitly setting `determineDevDependencies: true` (it's not a safe operation) (#163711)" (flutter/flutter#163762) 2025-02-20 [email protected] Revert "Create g3_bug.yml" (flutter/flutter#163757) 2025-02-20 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Make Flutter version information accessible at runtime (#140783)" (flutter/flutter#163753) 2025-02-20 [email protected] Skip Xcode install on mac_mokey Android tests (flutter/flutter#163685) 2025-02-20 [email protected] Roll Dart SDK from 2cecb16348e4 to 557cbf2c7da6 (3 revisions) (flutter/flutter#163705) 2025-02-20 [email protected] Add `FlutterVersion.engineCommitDate`, helps signal engine artifact SHA issues (flutter/flutter#163652) 2025-02-20 [email protected] Avoid implicitly setting `determineDevDependencies: true` (it's not a safe operation) (flutter/flutter#163711) 2025-02-20 [email protected] It is now safe to call `getBuildMode().release` (flutter/flutter#163712) 2025-02-20 [email protected] [iOS] remove Skia interfaces from iOS platform code. (flutter/flutter#163505) 2025-02-20 [email protected] Make Flutter version information accessible at runtime (flutter/flutter#140783) 2025-02-20 [email protected] [windows] Implement merged UI and platform thread (flutter/flutter#162935) 2025-02-20 [email protected] `CircularProgressIndicator` throws null exception (flutter/flutter#163356) 2025-02-20 [email protected] Fix the issue where DropdownMenu does not gain focus when tapped. (flutter/flutter#162874) 2025-02-20 [email protected] Check for tracked engine.version before overriding (flutter/flutter#163672) 2025-02-20 [email protected] showDialogs adds a `requestFocus` parameter. (flutter/flutter#162928) 2025-02-20 [email protected] Create helper method to dispatch object creation and disposal. (flutter/flutter#163637) 2025-02-20 [email protected] Redistribute iOS TESTOWNERS (flutter/flutter#163653) 2025-02-20 [email protected] enclosingElement -> enclosingElement3 (flutter/flutter#163681) 2025-02-19 [email protected] [ Widget Preview ] Move `preview_detector_test.dart` from `general.shard` to `commands.shard` (flutter/flutter#163619) 2025-02-19 [email protected] [iOS] always post new task during gesture dispatch. (flutter/flutter#163646) 2025-02-19 [email protected] Allow flutter tools to detach a running Chrome session (flutter/flutter#163349) 2025-02-19 [email protected] Reland "[Impeller] add support for rational bezier conics to Path (#63282)" (flutter/flutter#163645) 2025-02-19 [email protected] [web:a11y] wheel events switch to pointer mode (flutter/flutter#163582) ...
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`](https://api.flutter.dev/flutter/material/MaterialApp/highContrastTheme.html) and [`highContrastDarkTheme`](https://api.flutter.dev/flutter/material/MaterialApp/highContrastDarkTheme.html).
) Manual roll Flutter from 39b4951 to 911aa75 (56 revisions) Manual roll requested by [email protected] flutter/flutter@39b4951...911aa75 2025-02-21 [email protected] Remove legacy scenec stuff from flutter_tool (flutter/flutter#163569) 2025-02-21 [email protected] [fuchsia] reorder tests in test_suites.yaml and update the comment (flutter/flutter#163799) 2025-02-21 [email protected] Roll Dart SDK from 7ceb3be8ed0a to c5e582f15b6c (2 revisions) (flutter/flutter#163844) 2025-02-21 [email protected] Roll Packages from a9b9172 to 5a721da (2 revisions) (flutter/flutter#163848) 2025-02-21 [email protected] Roll Dart SDK from ad642ee6f94b to 7ceb3be8ed0a (2 revisions) (flutter/flutter#163832) 2025-02-21 [email protected] Update how to use VSCode with `clangd` after the monorepo merge (flutter/flutter#163671) 2025-02-21 [email protected] Reland #163711 after #163780 (flutter/flutter#163812) 2025-02-21 [email protected] Fix incorrect function name in FlutterEngineRun documentation (flutter/flutter#163696) 2025-02-21 [email protected] Roll Dart SDK from 557cbf2c7da6 to ad642ee6f94b (5 revisions) (flutter/flutter#163794) 2025-02-21 [email protected] [canvaskit] Use `visualViewport.scale` to determine device pixel ratio. (flutter/flutter#163688) 2025-02-21 [email protected] [DisplayList] Migrate rendering tests and benchmarks to DL geometry (flutter/flutter#163766) 2025-02-21 [email protected] Make `releaseMode` explicit, inform `determineDevDependencies` entirely on the flag (flutter/flutter#163780) 2025-02-21 [email protected] Ensure `exclude_dev_dependencies_test` runs if `flutter_tools` changes. (flutter/flutter#163768) 2025-02-21 [email protected] WebKit should respect TextCapitalization.words (flutter/flutter#161027) 2025-02-21 [email protected] CupertinoSliverNavigationBar.search fidelity updates (flutter/flutter#163089) 2025-02-21 [email protected] feat: Add selectionColor property to selectable text (flutter/flutter#162177) 2025-02-20 [email protected] Restore `linux_android_emulator_tests` to CI. (flutter/flutter#163747) 2025-02-20 [email protected] introduce system color palette (flutter/flutter#163335) 2025-02-20 [email protected] [web] DRY up access to headers required for multi-threaded WebAssembly (flutter/flutter#163555) 2025-02-20 [email protected] fix(CupertinoDatePicker): font is inconsistent (flutter/flutter#162932) 2025-02-20 [email protected] Create Android-API-And-Related-Versions.md (flutter/flutter#163556) 2025-02-20 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Avoid implicitly setting `determineDevDependencies: true` (it's not a safe operation) (#163711)" (flutter/flutter#163762) 2025-02-20 [email protected] Revert "Create g3_bug.yml" (flutter/flutter#163757) 2025-02-20 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Make Flutter version information accessible at runtime (#140783)" (flutter/flutter#163753) 2025-02-20 [email protected] Skip Xcode install on mac_mokey Android tests (flutter/flutter#163685) 2025-02-20 [email protected] Roll Dart SDK from 2cecb16348e4 to 557cbf2c7da6 (3 revisions) (flutter/flutter#163705) 2025-02-20 [email protected] Add `FlutterVersion.engineCommitDate`, helps signal engine artifact SHA issues (flutter/flutter#163652) 2025-02-20 [email protected] Avoid implicitly setting `determineDevDependencies: true` (it's not a safe operation) (flutter/flutter#163711) 2025-02-20 [email protected] It is now safe to call `getBuildMode().release` (flutter/flutter#163712) 2025-02-20 [email protected] [iOS] remove Skia interfaces from iOS platform code. (flutter/flutter#163505) 2025-02-20 [email protected] Make Flutter version information accessible at runtime (flutter/flutter#140783) 2025-02-20 [email protected] [windows] Implement merged UI and platform thread (flutter/flutter#162935) 2025-02-20 [email protected] `CircularProgressIndicator` throws null exception (flutter/flutter#163356) 2025-02-20 [email protected] Fix the issue where DropdownMenu does not gain focus when tapped. (flutter/flutter#162874) 2025-02-20 [email protected] Check for tracked engine.version before overriding (flutter/flutter#163672) 2025-02-20 [email protected] showDialogs adds a `requestFocus` parameter. (flutter/flutter#162928) 2025-02-20 [email protected] Create helper method to dispatch object creation and disposal. (flutter/flutter#163637) 2025-02-20 [email protected] Redistribute iOS TESTOWNERS (flutter/flutter#163653) 2025-02-20 [email protected] enclosingElement -> enclosingElement3 (flutter/flutter#163681) 2025-02-19 [email protected] [ Widget Preview ] Move `preview_detector_test.dart` from `general.shard` to `commands.shard` (flutter/flutter#163619) 2025-02-19 [email protected] [iOS] always post new task during gesture dispatch. (flutter/flutter#163646) 2025-02-19 [email protected] Allow flutter tools to detach a running Chrome session (flutter/flutter#163349) 2025-02-19 [email protected] Reland "[Impeller] add support for rational bezier conics to Path (#63282)" (flutter/flutter#163645) 2025-02-19 [email protected] [web:a11y] wheel events switch to pointer mode (flutter/flutter#163582) ...
) Manual roll Flutter from 39b4951 to 911aa75 (56 revisions) Manual roll requested by [email protected] flutter/flutter@39b4951...911aa75 2025-02-21 [email protected] Remove legacy scenec stuff from flutter_tool (flutter/flutter#163569) 2025-02-21 [email protected] [fuchsia] reorder tests in test_suites.yaml and update the comment (flutter/flutter#163799) 2025-02-21 [email protected] Roll Dart SDK from 7ceb3be8ed0a to c5e582f15b6c (2 revisions) (flutter/flutter#163844) 2025-02-21 [email protected] Roll Packages from a9b9172 to 5a721da (2 revisions) (flutter/flutter#163848) 2025-02-21 [email protected] Roll Dart SDK from ad642ee6f94b to 7ceb3be8ed0a (2 revisions) (flutter/flutter#163832) 2025-02-21 [email protected] Update how to use VSCode with `clangd` after the monorepo merge (flutter/flutter#163671) 2025-02-21 [email protected] Reland #163711 after #163780 (flutter/flutter#163812) 2025-02-21 [email protected] Fix incorrect function name in FlutterEngineRun documentation (flutter/flutter#163696) 2025-02-21 [email protected] Roll Dart SDK from 557cbf2c7da6 to ad642ee6f94b (5 revisions) (flutter/flutter#163794) 2025-02-21 [email protected] [canvaskit] Use `visualViewport.scale` to determine device pixel ratio. (flutter/flutter#163688) 2025-02-21 [email protected] [DisplayList] Migrate rendering tests and benchmarks to DL geometry (flutter/flutter#163766) 2025-02-21 [email protected] Make `releaseMode` explicit, inform `determineDevDependencies` entirely on the flag (flutter/flutter#163780) 2025-02-21 [email protected] Ensure `exclude_dev_dependencies_test` runs if `flutter_tools` changes. (flutter/flutter#163768) 2025-02-21 [email protected] WebKit should respect TextCapitalization.words (flutter/flutter#161027) 2025-02-21 [email protected] CupertinoSliverNavigationBar.search fidelity updates (flutter/flutter#163089) 2025-02-21 [email protected] feat: Add selectionColor property to selectable text (flutter/flutter#162177) 2025-02-20 [email protected] Restore `linux_android_emulator_tests` to CI. (flutter/flutter#163747) 2025-02-20 [email protected] introduce system color palette (flutter/flutter#163335) 2025-02-20 [email protected] [web] DRY up access to headers required for multi-threaded WebAssembly (flutter/flutter#163555) 2025-02-20 [email protected] fix(CupertinoDatePicker): font is inconsistent (flutter/flutter#162932) 2025-02-20 [email protected] Create Android-API-And-Related-Versions.md (flutter/flutter#163556) 2025-02-20 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Avoid implicitly setting `determineDevDependencies: true` (it's not a safe operation) (#163711)" (flutter/flutter#163762) 2025-02-20 [email protected] Revert "Create g3_bug.yml" (flutter/flutter#163757) 2025-02-20 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Make Flutter version information accessible at runtime (#140783)" (flutter/flutter#163753) 2025-02-20 [email protected] Skip Xcode install on mac_mokey Android tests (flutter/flutter#163685) 2025-02-20 [email protected] Roll Dart SDK from 2cecb16348e4 to 557cbf2c7da6 (3 revisions) (flutter/flutter#163705) 2025-02-20 [email protected] Add `FlutterVersion.engineCommitDate`, helps signal engine artifact SHA issues (flutter/flutter#163652) 2025-02-20 [email protected] Avoid implicitly setting `determineDevDependencies: true` (it's not a safe operation) (flutter/flutter#163711) 2025-02-20 [email protected] It is now safe to call `getBuildMode().release` (flutter/flutter#163712) 2025-02-20 [email protected] [iOS] remove Skia interfaces from iOS platform code. (flutter/flutter#163505) 2025-02-20 [email protected] Make Flutter version information accessible at runtime (flutter/flutter#140783) 2025-02-20 [email protected] [windows] Implement merged UI and platform thread (flutter/flutter#162935) 2025-02-20 [email protected] `CircularProgressIndicator` throws null exception (flutter/flutter#163356) 2025-02-20 [email protected] Fix the issue where DropdownMenu does not gain focus when tapped. (flutter/flutter#162874) 2025-02-20 [email protected] Check for tracked engine.version before overriding (flutter/flutter#163672) 2025-02-20 [email protected] showDialogs adds a `requestFocus` parameter. (flutter/flutter#162928) 2025-02-20 [email protected] Create helper method to dispatch object creation and disposal. (flutter/flutter#163637) 2025-02-20 [email protected] Redistribute iOS TESTOWNERS (flutter/flutter#163653) 2025-02-20 [email protected] enclosingElement -> enclosingElement3 (flutter/flutter#163681) 2025-02-19 [email protected] [ Widget Preview ] Move `preview_detector_test.dart` from `general.shard` to `commands.shard` (flutter/flutter#163619) 2025-02-19 [email protected] [iOS] always post new task during gesture dispatch. (flutter/flutter#163646) 2025-02-19 [email protected] Allow flutter tools to detach a running Chrome session (flutter/flutter#163349) 2025-02-19 [email protected] Reland "[Impeller] add support for rational bezier conics to Path (#63282)" (flutter/flutter#163645) 2025-02-19 [email protected] [web:a11y] wheel events switch to pointer mode (flutter/flutter#163582) ...
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).
Introduce system colors:
SystemColorclass.PlatformDispatcher.systemColorsgetter.The web engine part for #118853