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 07c1bf1e6a4..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,10 +224,11 @@ const darkColorScheme = ColorScheme( ); const searchMatchColor = Colors.yellow; -final searchMatchColorOpaque = Colors.yellow.withValues(alpha: 255 / 2); +final searchMatchColorTranslucent = Colors.yellow.withValues(alpha: 0.5); const activeSearchMatchColor = Colors.orangeAccent; -final activeSearchMatchColorOpaque = - Colors.orangeAccent.withValues(alpha: 255 / 2); +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 fdea9c2230d..29043fea2bc 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(searchMatchColorTranslucent.a, closeTo(0.5, 0.001)); + expect(activeSearchMatchColorTranslucent.a, closeTo(0.5, 0.001)); + }); + }); }