From b93790e06c6e7ec8a0e2f31f20d9159c2150ca6e Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Fri, 5 Jun 2026 10:51:03 +0200
Subject: [PATCH] fix(search): align DocSearch v4 modal colors with the
 Playwright brand

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>
---
 src/css/custom.css | 44 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index cd18a956aa..b3b5cf131b 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -112,6 +112,46 @@ x-search {
 }
 
 
-:root {
-  --docsearch-muted-color: #666c77 !important;
+/* ----------------------------------------------------------------------------
+   Algolia DocSearch — brand colour alignment
+   DocSearch v4 ships Algolia-blue/indigo accents and navy dark-mode surfaces
+   that clash with the Playwright palette. Docusaurus maps
+   --docsearch-primary-color to --ifm-color-primary (green), but the v4 accent
+   variables below are NOT mapped and keep their defaults, so we override them.
+   `:root:root` raises specificity above DocSearch's own later-injected `:root`
+   without needing !important. The Algolia logo stays blue on purpose: its SVG
+   uses hardcoded fills and the free tier requires the mark to stay unmodified.
+---------------------------------------------------------------------------- */
+:root:root {
+  /* Blue -> Playwright green: magnifier, search/back icons, links, hit marks */
+  --docsearch-highlight-color: var(--ifm-color-primary);
+  /* Selected result row + action hover: blue tint -> green tint */
+  --docsearch-hit-highlight-color: rgba(26, 126, 31, 0.1);
+  --docsearch-soft-primary-color: rgba(26, 126, 31, 0.1);
+  /* Indigo-tinted greys -> neutral */
+  --docsearch-muted-color: #666c77;
+  --docsearch-secondary-text-color: #5e6a75;
+  --docsearch-icon-color: #5e6a75;
+  --docsearch-subtle-color: #e3e3e7;
+}
+
+:root[data-theme='dark'] {
+  /* Navy/indigo surfaces -> neutral Playwright dark */
+  --docsearch-modal-background: #242526;
+  --docsearch-hit-background: #1b1b1d;
+  --docsearch-background-color: #1b1b1d;
+  --docsearch-text-color: #e3e3e3;
+  --docsearch-secondary-text-color: #a0a6ad;
+  --docsearch-icon-color: #a0a6ad;
+  --docsearch-subtle-color: #2a2a2c;
+  /* Brighter green tint for the selected row on dark backgrounds */
+  --docsearch-hit-highlight-color: rgba(69, 186, 75, 0.12);
+  --docsearch-soft-primary-color: rgba(69, 186, 75, 0.12);
+}
+
+/* The "no results" magnifier icon ships with a hardcoded indigo stroke
+   attribute (stroke="#5a5e9a") instead of reading a variable, so it ignores
+   the palette above. Neutralise it to match the other DocSearch icons. */
+.DocSearch-NoResults svg {
+  stroke: var(--docsearch-icon-color);
 }