fix(ui-mode): Watch mode button doesn't show active when test selected

[GeneratorX16]

description: The watch mode button was not showing as highlighted when a test in the tree view was focused and the watch icon was being clicked. Handled this issue for both, light mode and dark mode visibility.
#34434
Light Mode (Selected/Focused):

Dark Mode (Selected/Focused):

[github-actions]

Test results for "tests 1"

22 flaky

⚠️ [firefox-page] › tests/page/page-evaluate.spec.ts:403:3 › should throw for too deep reference chain @firefox-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/browser.spec.ts:54:5 › should dispatch page.on(close) upon browser.close and reject evaluate @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/browsercontext-clearcookies.spec.ts:92:3 › should remove cookies by domain @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/browsercontext-har.spec.ts:455:3 › should update har.zip for page @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/browsercontext-pages.spec.ts:105:3 › should return bounding box with page scale @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/browsertype-connect.spec.ts:323:5 › launchServer › should set the browser connected state @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/popup.spec.ts💯3 › should inherit touch support from browser context @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/screenshot.spec.ts:44:14 › page screenshot › should work with a mobile viewport @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/screenshot.spec.ts:55:14 › page screenshot › should work with a mobile viewport and clip @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/screenshot.spec.ts:66:14 › page screenshot › should work with a mobile viewport and fullPage @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/screenshot.spec.ts:206:14 › element screenshot › element screenshot should work with a mobile viewport @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/screenshot.spec.ts:278:14 › element screenshot › should restore viewport after page screenshot and exception @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/screenshot.spec.ts:291:14 › element screenshot › should restore viewport after page screenshot and timeout @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/trace-viewer.spec.ts:319:1 › should show null as a param @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/video.spec.ts:379:5 › screencast › should capture navigation @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/video.spec.ts:411:5 › screencast › should capture css transformation @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/video.spec.ts:441:5 › screencast › should work for popups @webkit-ubuntu-22.04-node18
⚠️ [webkit-library] › tests/library/video.spec.ts:475:5 › screencast › should scale frames down to the requested size @webkit-ubuntu-22.04-node18
⚠️ [webkit-page] › tests/page/page-leaks.spec.ts:82:5 › click should not leak @webkit-ubuntu-22.04-node18
⚠️ [webkit-page] › tests/page/page-leaks.spec.ts:107:5 › fill should not leak @webkit-ubuntu-22.04-node18
⚠️ [webkit-page] › tests/page/page-leaks.spec.ts:161:5 › waitFor should not leak @webkit-ubuntu-22.04-node18
⚠️ [webkit-page] › tests/page/page-set-input-files.spec.ts:205:3 › should upload multiple large files @webkit-ubuntu-22.04-node18

37741 passed, 654 skipped
✔️✔️✔️

Merge workflow run.

[agg23]

Thank you for the PR. While this is an improvement, this does not pass contrast accessibility, so it technically has not fixed the problem.

Instead of attempting to find a color that works, the correct solution is to draw a box around the active watch icon and keep the watch icon as always white. This isn't the best example screenshot, but you can see how the button is handled.