From dd458e19bf47f0f390f859ad252bd79c4e39423a Mon Sep 17 00:00:00 2001 From: gords2 Date: Sun, 21 Jun 2026 11:49:56 -0700 Subject: [PATCH 1/2] Fix bad contrast for highlighted search results in tables `searchMatchColorOpaque` and `activeSearchMatchColorOpaque` are blended over the row background to highlight search matches. They were migrated from `withOpacity(0.5)` to `withValues(alpha: 255 / 2)` in #8784; since `withValues` expects alpha in the range 0.0-1.0, `255 / 2` clamps to fully opaque. Matched rows then got a solid yellow/orange background while the row text kept its theme color, making it unreadable (especially in dark mode). Restore the intended 0.5 alpha so the highlight stays translucent and the row text remains legible, and add a regression test. Fixes #9010 --- .../devtools_app_shared/lib/src/ui/theme/theme.dart | 5 ++--- packages/devtools_app_shared/test/ui/theme_test.dart | 11 +++++++++++ 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/devtools_app_shared/lib/src/ui/theme/theme.dart b/packages/devtools_app_shared/lib/src/ui/theme/theme.dart index 07c1bf1e6a4..ba7edc40e1a 100644 --- a/packages/devtools_app_shared/lib/src/ui/theme/theme.dart +++ b/packages/devtools_app_shared/lib/src/ui/theme/theme.dart @@ -224,10 +224,9 @@ const darkColorScheme = ColorScheme( ); const searchMatchColor = Colors.yellow; -final searchMatchColorOpaque = Colors.yellow.withValues(alpha: 255 / 2); +final searchMatchColorOpaque = Colors.yellow.withValues(alpha: 0.5); const activeSearchMatchColor = Colors.orangeAccent; -final activeSearchMatchColorOpaque = - Colors.orangeAccent.withValues(alpha: 255 / 2); +final activeSearchMatchColorOpaque = Colors.orangeAccent.withValues(alpha: 0.5); /// Gets an alternating color to use for indexed UI elements. Color alternatingColorForIndex(int index, ColorScheme colorScheme) { diff --git a/packages/devtools_app_shared/test/ui/theme_test.dart b/packages/devtools_app_shared/test/ui/theme_test.dart index fdea9c2230d..185adf16b0d 100644 --- a/packages/devtools_app_shared/test/ui/theme_test.dart +++ b/packages/devtools_app_shared/test/ui/theme_test.dart @@ -99,4 +99,15 @@ void main() { ); }); }); + + group('search match colors', () { + // Regression test for https://github.com/flutter/devtools/issues/9010: the + // "opaque" search match colors are blended over the row background, so they + // must stay translucent. Otherwise the (theme-colored) row text is drawn on + // a fully opaque highlight and becomes unreadable. + test('are translucent so row text stays legible', () { + expect(searchMatchColorOpaque.a, closeTo(0.5, 0.001)); + expect(activeSearchMatchColorOpaque.a, closeTo(0.5, 0.001)); + }); + }); } From dd1ac9a4be07a4b413d9d61fa74b04fee9f35979 Mon Sep 17 00:00:00 2001 From: gords2 Date: Mon, 22 Jun 2026 17:56:28 -0700 Subject: [PATCH 2/2] Rename search match colors to *Translucent; add release note --- packages/devtools_app/lib/src/shared/table/_table_row.dart | 4 ++-- packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md | 4 +++- packages/devtools_app_shared/lib/src/ui/theme/theme.dart | 6 ++++-- packages/devtools_app_shared/test/ui/theme_test.dart | 4 ++-- 4 files changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/devtools_app/lib/src/shared/table/_table_row.dart b/packages/devtools_app/lib/src/shared/table/_table_row.dart index afecd702bc7..8f2bfbe4485 100644 --- a/packages/devtools_app/lib/src/shared/table/_table_row.dart +++ b/packages/devtools_app/lib/src/shared/table/_table_row.dart @@ -324,8 +324,8 @@ class _TableRowState extends State> final searchAwareBackgroundColor = isSearchMatch ? Color.alphaBlend( isActiveSearchMatch - ? activeSearchMatchColorOpaque - : searchMatchColorOpaque, + ? activeSearchMatchColorTranslucent + : searchMatchColorTranslucent, backgroundColor, ) : backgroundColor; diff --git a/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md b/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md index 2cd2c928fe0..982483ff2d8 100644 --- a/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md +++ b/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md @@ -15,7 +15,9 @@ To learn more about DevTools, check out the ## General updates -TODO: Remove this section if there are not any updates. +* Fixed a bug where highlighted search matches in tables were unreadable in dark + mode because the highlight color had become fully opaque. - + [#9863](https://github.com/flutter/devtools/pull/9863) ## Inspector updates diff --git a/packages/devtools_app_shared/lib/src/ui/theme/theme.dart b/packages/devtools_app_shared/lib/src/ui/theme/theme.dart index ba7edc40e1a..0480cf3d322 100644 --- a/packages/devtools_app_shared/lib/src/ui/theme/theme.dart +++ b/packages/devtools_app_shared/lib/src/ui/theme/theme.dart @@ -224,9 +224,11 @@ const darkColorScheme = ColorScheme( ); const searchMatchColor = Colors.yellow; -final searchMatchColorOpaque = Colors.yellow.withValues(alpha: 0.5); +final searchMatchColorTranslucent = Colors.yellow.withValues(alpha: 0.5); const activeSearchMatchColor = Colors.orangeAccent; -final activeSearchMatchColorOpaque = Colors.orangeAccent.withValues(alpha: 0.5); +final activeSearchMatchColorTranslucent = Colors.orangeAccent.withValues( + alpha: 0.5, +); /// Gets an alternating color to use for indexed UI elements. Color alternatingColorForIndex(int index, ColorScheme colorScheme) { diff --git a/packages/devtools_app_shared/test/ui/theme_test.dart b/packages/devtools_app_shared/test/ui/theme_test.dart index 185adf16b0d..29043fea2bc 100644 --- a/packages/devtools_app_shared/test/ui/theme_test.dart +++ b/packages/devtools_app_shared/test/ui/theme_test.dart @@ -106,8 +106,8 @@ void main() { // must stay translucent. Otherwise the (theme-colored) row text is drawn on // a fully opaque highlight and becomes unreadable. test('are translucent so row text stays legible', () { - expect(searchMatchColorOpaque.a, closeTo(0.5, 0.001)); - expect(activeSearchMatchColorOpaque.a, closeTo(0.5, 0.001)); + expect(searchMatchColorTranslucent.a, closeTo(0.5, 0.001)); + expect(activeSearchMatchColorTranslucent.a, closeTo(0.5, 0.001)); }); }); }