facebook / facebook/docusaurus

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

Open
#11,542 3 comments 0 reactions 0 assignees View on GitHub
bug external
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

### Have you read the Contributing Guidelines on issues?

- [x] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Prerequisites

- [x] I'm using the latest version of Docusaurus.
- [x] I have tried the `npm run clear` or `yarn clear` command.
- [x] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [x] I have tried creating a repro with https://new.docusaurus.io.
- [x] 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](https://github.com/algolia/docsearch/blob/98067b58a2b752a3f498991f7b55150dc500b2ee/packages/docsearch-css/src/_variables.css#L19)).

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.

```js
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.

Image

### 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

- [x] I'd be willing to fix this bug myself.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.