Skip to content

Fix bad contrast for highlighted search results in tables#9863

Open
gords2 wants to merge 1 commit into
flutter:masterfrom
gords2:fix/search-match-contrast
Open

Fix bad contrast for highlighted search results in tables#9863
gords2 wants to merge 1 commit into
flutter:masterfrom
gords2:fix/search-match-contrast

Conversation

@gords2

@gords2 gords2 commented Jun 21, 2026

Copy link
Copy Markdown

Fixes #9010

Problem

When a table row matches a search (e.g. searching in the CPU profiler), the whole row was highlighted with a fully opaque yellow/orange background while the row text kept its theme color (onSurface). In dark mode that's light text on solid yellow — unreadable.

Root cause

_table_row.dart blends searchMatchColorOpaque / activeSearchMatchColorOpaque over the row background. These were intended to be translucent (Colors.yellow.withOpacity(0.5)), but during the withOpacitywithValues migration in #8784 they became:

Colors.yellow.withValues(alpha: 255 / 2);

withValues takes alpha in the range 0.01.0, so 255 / 2 (= 127.5) clamps to 1.0 — fully opaque. The row tint stopped being translucent, so the underlying text was no longer legible. (This issue was filed 2025-03, ~2 months after #8784 landed the regression.)

Fix

Restore the intended translucency:

Colors.yellow.withValues(alpha: 0.5);
Colors.orangeAccent.withValues(alpha: 0.5);

The highlight is again a subtle 50% tint over the row background, so the theme-colored text stays readable in both light and dark themes. Added a regression test asserting these colors remain translucent.

Note

I couldn't run flutter test locally (no Dart/Flutter toolchain in my environment) — relying on CI to validate.

`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 flutter#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 flutter#9010
@gords2 gords2 requested a review from kenzieschmoll as a code owner June 21, 2026 18:50

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Code Review

This pull request updates the alpha values for search match colors to 0.5 and adds corresponding regression tests to ensure they remain translucent. The reviewer notes that the variable names searchMatchColorOpaque and activeSearchMatchColorOpaque are misleading because they represent translucent colors, and suggests renaming them to better reflect their properties.

Comment on lines +227 to +229
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);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

[CONCERN] The variable names searchMatchColorOpaque and activeSearchMatchColorOpaque are misleading because they actually represent translucent colors (with an alpha of 0.5), whereas searchMatchColor and activeSearchMatchColor are the fully opaque versions. Consider renaming these variables to searchMatchColorTranslucent and activeSearchMatchColorTranslucent (or similar) to accurately reflect their properties and avoid confusion for future maintainers. Note that this would require updating their usages in _table_row.dart and other files.

References
  1. The repository style guide emphasizes 'Meaningful Naming' under Code Quality constraints. (link)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bad contrast for highlighted search results in tables

1 participant