DocSearch styles don't respect `navbar.style: dark`

[erickzhao]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

After upgrading to Docusaurus 3.9,

The root cause of this issue is that the upstream --docsearch-* CSS variables apply their dark/light mode based on the root site's data-theme attribute.

Ideally, we would be able to apply html[data-theme='dark'] variables while the search box is wrapped in the .navbar--dark class, but I don't think this is possible given the structure of the CSS (variables are being applied upstream at @docsearch/css).

Potential fixes:

• Duplicate the dark mode CSS variables for components within the .navbar--dark class.
• Update variables upstream in @docsearch/css so we don't need to manually copy these values to the previous CSS rule.

Reproducible demo

https://codesandbox.io/p/devbox/xenodochial-ritchie-tk6g7f?file=%2Fdocusaurus.config.js

Steps to reproduce

1. Enable Algolia search by setting themeConfig.algolia in your Docusaurus config.
2. Set themeConfig.navbar.style: dark in your Docusaurus config.

const config = {
  themeConfig: {
    algolia: { /** some algolia configuration */ },
    navbar: {
       style: 'dark'
    }
  }
}

Expected behavior

Dark mode colour scheme in the navbar should apply regardless of light/dark mode value.

Actual behavior

Light mode colours apply, leading to limited readability in the search box.

Your environment

• Docusaurus version used: 3.9.2
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 142
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS Sequoia

Self-service

• I'd be willing to fix this bug myself.

[slorber]

As far as I see (square search button), you upgraded to DocSearch v4 (opt-in).

I've double-checked the behavior for both DocSearch v3 / v4, and here's the result on our website:

---

DocSearch v3

Light mode:

Dark mode:

DocSearch v4

Light: although it looks good to me, this is because of custom site CSS we have 😅

Dark:

---

I understand the following doesn't look great on the Electron website (bug electron/website#924), and you want to fix it:

However, we historically have the behavior of rendering a light search background when the theme is light mode, even on a dark navbar.

Nobody complained about that behavior so far, so I'd rather not change it in a minor release.

If you think the search background should always match the navbar background, this is not really a bug, and I suggest opening this as a separate proposal issue so that we can ask the community about it.

I still think it makes sense to keep the light theme for the search button when the main theme is light, despite the dark style of the navbar. Overall the site is light, and the search modal will also be light. It may feel weird it the button dark and it opens a light modal? 🤷‍♂️

---

What I'm going to consider a bug, is that the combination of light mode + dark navbar style doesn't look great on a newly initialized Docusaurus site with Algolia.

Note that it only affects DocSearch v4, which we only added support for recently:

DocSearch v3 still renders the input as we expect:

---

So, I'm going to fix the accessibility issue when using DocSearch v4 + light mode + dark navbar style.

The fix may break your own solution implemented here: make sure to check it still works as you expect after upgrading to Docusaurus v3.10 when we release it.

[slorber]

It looks to me like a DocSearch v4 bug: algolia/docsearch#2804

I tried installing the button on a freshly initialized Vite React project, and the button didn't look better.

[erickzhao]

Thanks for digging into this @slorber!