Skip to content

fix: resolve search icon contrast in dark mode - #4196

Merged
szakarias merged 3 commits into
dart-lang:mainfrom
NamanGoyalK:fix/search-icon-dark-mode
Feb 24, 2026
Merged

szakarias merged 3 commits into
dart-lang:mainfrom
NamanGoyalK:fix/search-icon-dark-mode

Conversation

@NamanGoyalK

Copy link
Copy Markdown
Contributor

This PR resolves the accessibility issue where the search icon was nearly invisible in dark mode.

Changes:

  • Added a new asset lib/resources/search_dark.svg with high contrast for dark backgrounds.
  • Introduced a CSS variable --search-icon-url in web/styles/_theme.scss to handle theme-aware icon switching.
  • Updated web/styles/_search.scss to utilize the new variable.
  • Re-generated lib/src/generator/html_resources.g.dart and compiled assets to include the new resource in the build.

Related Issues

Fixes #4124

Checklist

  • I’ve reviewed the contributor guide and applied the relevant portions to this PR.
  • I have used dart format on all modified Dart files.
  • I have verified the fix locally by toggling between light and dark themes.

before:
image

after:
image

@NamanGoyalK

Copy link
Copy Markdown
Contributor Author

@guidezpl give me a an hour and i will fix these ci/cd issues

@NamanGoyalK
NamanGoyalK force-pushed the fix/search-icon-dark-mode branch from 7dc7817 to 819fe50 Compare February 13, 2026 10:42
@NamanGoyalK

Copy link
Copy Markdown
Contributor Author

@guidezpl My apologies for the force-push! I'm still getting used to the workflow here, lesson learned from my other PR with @kevmoo .

I've addressed the CI/CD issues you mentioned. Since the history was reset, would you mind taking a quick second look? I won't force-push again! :]

@kevmoo

kevmoo commented Feb 14, 2026

Copy link
Copy Markdown
Member

Cool beans, @NamanGoyalK ! No worries about the force push. It's not a HUGE deal, just something to be careful about.

@NamanGoyalK

Copy link
Copy Markdown
Contributor Author

Finally found the culprit! The new search_dark.svg wasn't included in the test resources list, which was causing the CI failures. Added it in the new commit, should be good to go now! CC: @guidezpl @kevmoo

@NamanGoyalK

Copy link
Copy Markdown
Contributor Author

All checks are passing now! @guidezpl whenever you have a moment, this should be ready for a final review and merge. Thanks!

@NamanGoyalK

Copy link
Copy Markdown
Contributor Author

@srawlins @kevmoo The CI/CD failures are resolved (it was a missing asset in the test resources). All 14 checks are passing now, and the contrast fix is ready for a final maintainer review/merge. Thanks!

@kevmoo

kevmoo commented Feb 16, 2026

Copy link
Copy Markdown
Member

@srawlins ?

@kevmoo
kevmoo requested a review from srawlins February 16, 2026 20:02

@srawlins srawlins left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM, but please wait for @szakarias or @sigurdm or @jonasfj

Also CC @parlough who worked on this in the past, I believe.

NamanGoyalK and others added 3 commits February 24, 2026 13:38
Adds search_dark.svg and updates theme variables to ensure visibility on dark backgrounds. Fixes dart-lang#4124.
@szakarias
szakarias force-pushed the fix/search-icon-dark-mode branch from eb06c26 to ff1d4d9 Compare February 24, 2026 13:46
@szakarias

Copy link
Copy Markdown
Collaborator

Thanks for the contribution!

@szakarias
szakarias merged commit 9982212 into dart-lang:main Feb 24, 2026
14 checks passed
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.

Fix search icon not visible in dark mode

5 participants