AlgoliaLogo not using --docsearch-logo-color CSS variable
- Dominant language
- TypeScript
- Stars
- 4.4k
- Forks
- 439
- Avg merge
- 14h 32m
- Merged PRs (30d)
- 19
Description
_NOTE: There's an open PR to fix this: https://github.com/algolia/docsearch/pull/1949_
## Description
The `--docsearch-logo-color` CSS variable should be used by the logo placed on the bottom-right corner of the search, but this doesn't happen, due to [`cls-1` & `cls-2` fill being hardcoded to `#003dff`](https://github.com/algolia/docsearch/blob/f2f0e9fae2399315384a9cc6998b13b7123d24f3/packages/docsearch-react/src/AlgoliaLogo.tsx#L31). Which results in:
### Dark color scheme

### Light color scheme

## Expected behavior
This is what I'd like to achieve:
### Dark color scheme

### Light color scheme

## Temporary workaround
I could easily fix this on [my website](https://icflorescu.github.io/mantine-datatable/) by overriding the two classes like so:
```css
.DocSearch-Logo .cls-1,
.DocSearch-Logo .cls-2 {
fill: var(--docsearch-logo-color);
}
```
## Proposed fix
There's an open PR awaiting for review that should fix this: https://github.com/algolia/docsearch/pull/1949
Contributor guide
Research direction
Start with packages/docsearch-react/src/AlgoliaLogo.tsx at the linked hardcoded fills, then review pull request #1949 because it already proposes a fix. Done means the logo uses --docsearch-logo-color in both light and dark color schemes without the website-specific override.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 25/100