{"id":15505740,"url":"https://github.com/adrian-samoticha/appkit_ui_element_colors","last_synced_at":"2026-05-04T10:41:27.474Z","repository":{"id":144719569,"uuid":"610294518","full_name":"Adrian-Samoticha/appkit_ui_element_colors","owner":"Adrian-Samoticha","description":"A Flutter plugin that exposes AppKit’s “UI Element Colors” on macOS.","archived":false,"fork":false,"pushed_at":"2023-03-19T19:38:12.000Z","size":258,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-19T19:39:12.007Z","etag":null,"topics":["accent-color","appkit","color","dart","flutter","flutter-plugin","macos","swift","ui-element-colors"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/appkit_ui_element_colors","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Adrian-Samoticha.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-06T13:42:36.000Z","updated_at":"2023-03-20T19:21:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"ea1043ed-afc5-4e95-8165-ddc6ed8df4a6","html_url":"https://github.com/Adrian-Samoticha/appkit_ui_element_colors","commit_stats":{"total_commits":83,"total_committers":2,"mean_commits":41.5,"dds":"0.012048192771084376","last_synced_commit":"32de91b84a68ec0c424901a74aef6e6c3007ee05"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adrian-Samoticha%2Fappkit_ui_element_colors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adrian-Samoticha%2Fappkit_ui_element_colors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adrian-Samoticha%2Fappkit_ui_element_colors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adrian-Samoticha%2Fappkit_ui_element_colors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Adrian-Samoticha","download_url":"https://codeload.github.com/Adrian-Samoticha/appkit_ui_element_colors/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246083152,"owners_count":20720917,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accent-color","appkit","color","dart","flutter","flutter-plugin","macos","swift","ui-element-colors"],"created_at":"2024-10-02T09:24:23.788Z","updated_at":"2026-05-04T10:41:27.413Z","avatar_url":"https://github.com/Adrian-Samoticha.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# appkit_ui_element_colors\n\nA Flutter plugin that exposes AppKit’s [“UI Element Colors”](https://developer.apple.com/documentation/appkit/nscolor/ui_element_colors) to facilitate the\nretrieval of standard color objects for use with windows, controls, labels, text,\nselections and other content in your app.\n\n## Screenshot of example project\n\n\u003cimg width=\"678\" alt=\"Screenshot 2023-03-19 at 12 36 03\" src=\"https://user-images.githubusercontent.com/86920182/226172721-11429992-2a5c-4575-9d41-c8b14eab745d.png\"\u003e\n\n## Getting started\n\nInstall this package:\n\n```bash\nflutter pub add appkit_ui_element_colors\n```\n\nThen import it in your Dart code:\n\n```dart\nimport 'package:appkit_ui_element_colors/appkit_ui_element_colors.dart';\n```\n\n\n## Features\n\n### Retrieving UI element colors\n\nThe following colors are available:\n\n\u003cdetails\u003e\n\u003csummary\u003eAvailable UI Element colors\u003c/summary\u003e\n\n+ labelColor\n+ secondaryLabelColor\n+ tertiaryLabelColor\n+ quaternaryLabelColor\n+ textColor\n+ placeholderTextColor\n+ selectedTextColor\n+ textBackgroundColor\n+ selectedTextBackgroundColor\n+ keyboardFocusIndicatorColor\n+ unemphasizedSelectedTextColor\n+ unemphasizedSelectedTextBackgroundColor\n+ linkColor\n+ separatorColor\n+ selectedContentBackgroundColor\n+ unemphasizedSelectedContentBackgroundColor\n+ selectedMenuItemTextColor\n+ gridColor\n+ headerTextColor\n+ alternatingContentBackgroundColors0\n+ alternatingContentBackgroundColors1\n+ controlAccentColor\n+ controlColor\n+ controlBackgroundColor\n+ controlTextColor\n+ disabledControlTextColor\n+ currentControlTint\n+ selectedControlColor\n+ selectedControlTextColor\n+ alternateSelectedControlTextColor\n+ scrubberTexturedBackground\n+ windowBackgroundColor\n+ windowFrameTextColor\n+ underPageBackgroundColor\n+ findHighlightColor\n+ highlightColor\n+ shadowColor\n\n\u003c/details\u003e\n\nEach color can be retrieved as a [`Color`](https://api.flutter.dev/flutter/dart-ui/Color-class.html) object using the `AppkitUiElementColors.getColor` method:\n\n```dart\nfinal darkWindowBackgroundColor = await AppkitUiElementColors.getColor(\n  uiElementColor: UiElementColor.windowBackgroundColor,\n  appearance: NSAppearanceName.darkAqua,\n);\n```\n\nAlternatively, it can also be converted to any available `NSColorSpace` and retrieved as a map of requested `NSColorComponent`s using `AppkitUiElementColors.getColorComponents`:\n\n```dart\nfinal components = await AppkitUiElementColors.getColorComponents(\n  uiElementColor: UiElementColor.selectedControlColor,\n  components: {\n    NSColorComponent.redComponent,\n    NSColorComponent.greenComponent,\n    NSColorComponent.blueComponent,\n  },\n  colorSpace: NSColorSpace.sRGB,\n  appearance: NSAppearanceName.aqua,\n);\n\n// prints \"{blueComponent: 0.7450980544090271, redComponent: 1.0, greenComponent: 0.9333333373069763}\"\nprint(components);\n```\n\n### Observing system color changes\n\nCertain events, such as the user changing their preferred accent color, can trigger system color changes. Such changes can be observed using the `SystemColorObserver` class. The `AppkitUiElementColors` class provides a global shared instance of `SystemColorObserver` that can be accessed as follows:\n\n```dart\nAppkitUiElementColors.systemColorObserver.stream\n    .listen((_) =\u003e print('System colors changed.'));\n```\n\n### Building widgets using `UiElementColorBuilder`\n\nThe `UiElementColorBuilder` class provides a convenient way to build widgets that depend on UI element colors provided by **appkit_ui_element_colors**:\n\n```dart\nUiElementColorBuilder(\n  builder: (context, colorContainer) =\u003e Container(\n    color: colorContainer.windowBackgroundColor,\n  ),\n);\n```\n\nBy default, `UiElementColorBuilder` uses a\n`SharedUiElementColorContainerInstanceProvider` to provide a global\nshared instance of `UiElementColorContainer`.\n`SharedUiElementColorContainerInstanceProvider` uses an instance of\n`MediaQueryData` derived from the current `BuildContext` and assumes it to\nbe the same across all `UiElementBuilder`s which use it.\nIf your app contains surfaces with different `MediaQueryData` overrides,\nuse `OwnedUiElementColorContainerInstanceProvider` instead:\n\n```dart\n// A dark cupertino theme.\nCupertinoTheme(\n  data: const CupertinoThemeData(\n    brightness: Brightness.dark,\n  ),\n  // Override the MediaQueryData so that platformBrightness is dark.\n  child: MediaQuery(\n    data: MediaQuery.of(context).copyWith(\n      platformBrightness: Brightness.dark,\n    ),\n    child: UiElementColorBuilder(\n      // Since there may be surfaces within the app that do not override the\n      // brightness, use an OwnedUiElementColorContainerInstanceProvider.\n      uiElementColorContainerInstanceProvider:\n          OwnedUiElementColorContainerInstanceProvider(),\n      builder: (context, colorContainer) =\u003e Container(\n        color: colorContainer.windowBackgroundColor,\n      ),\n    ),\n  ),\n);\n```\n\nIncorrect usage of `SharedUiElementColorContainerInstanceProvider` throws the following assertion error:\n\n*“Found conflicting MediaQueryData in SharedUiElementColorContainerInstanceProvider. If you are using UiElementColorBuilder within widget subtrees with differing MediaQueryData (such as different theme brightness or accessibility settings), please use OwnedUiElementColorContainerInstanceProvider instead.”*","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrian-samoticha%2Fappkit_ui_element_colors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadrian-samoticha%2Fappkit_ui_element_colors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrian-samoticha%2Fappkit_ui_element_colors/lists"}