Skip to content

fix(search): align DocSearch v4 modal colors with the Playwright brand#2047

Merged
Skn0tt merged 1 commit into
microsoft:mainfrom
Skn0tt:skn0tt/algolia-search-colors
Jun 5, 2026
Merged

fix(search): align DocSearch v4 modal colors with the Playwright brand#2047
Skn0tt merged 1 commit into
microsoft:mainfrom
Skn0tt:skn0tt/algolia-search-colors

Conversation

@Skn0tt
Copy link
Copy Markdown
Member

@Skn0tt Skn0tt commented Jun 5, 2026

Summary

After the Docusaurus migration bumped Algolia DocSearch from v3 to v4, the search modal stopped picking up our brand color. DocSearch v4 moved its accent onto new CSS variables (--docsearch-highlight-color and friends) that Docusaurus's theme-search-algolia doesn't map to Infima — so on our green-branded site they fall back to Algolia blue/indigo, and dark mode renders navy surfaces.

This overrides the unmapped DocSearch v4 variables in custom.css so the search modal uses the Playwright green accent and neutral surfaces in both light and dark themes. Per DocSearch's styling docs, overriding these variables is the intended customization path for brand-colored sites.

What changed

  • Accent: magnifier, search/back icons, match highlights, links, and the selected-result row now use Playwright green instead of Algolia blue.
  • Dark surfaces: modal / result / background surfaces go from navy-indigo to neutral Playwright dark (#242526 / #1b1b1d).
  • Neutral greys: indigo-tinted secondary text / icon / subtle colors neutralized.
  • "No results" icon: its inline SVG hardcodes stroke="#5a5e9a" and ignores the variable palette, so it's neutralized with an explicit CSS rule.
  • Algolia logo intentionally left blue — its SVG uses hardcoded fills and the free tier requires the mark to stay unmodified.

Before / After

Light mode

Before After
v4-light-before v4-light-after

Dark mode

Before After
v4-dark-before v4-dark-after

"No results" icon

Before After
noresults-light noresults-light-after

Notes

  • Scoped to src/css/custom.css; no config or dependency changes.
  • Verified by inspecting the live computed --docsearch-* values in both themes on the running dev server.

DocSearch v4 moved its accent onto new CSS variables (--docsearch-highlight-color
and friends) that Docusaurus's theme-search-algolia does not map to Infima, so on
a brand-colored site they fall back to Algolia blue/indigo and dark-mode surfaces
render navy. Override the unmapped variables in custom.css to use the Playwright
green accent and neutral surfaces in both themes.

Also neutralize the "no results" icon, whose inline SVG hardcodes
stroke="#5a5e9a" and therefore ignores the DocSearch variable palette.

The Algolia logo is intentionally left blue: its SVG uses hardcoded fills and the
free tier requires the mark to stay unmodified.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@Skn0tt Skn0tt merged commit d08de5c into microsoft:main Jun 5, 2026
2 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.

2 participants