algolia / algolia/docsearch

AlgoliaLogo not using --docsearch-logo-color CSS variable

Open
#1,954 0 comments 0 reactions 0 assignees View on GitHub
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
![Algolia DocSearch on MantineDataTable docs website - Dark color scheme - wrong](https://github.com/algolia/docsearch/assets/581999/5bc0b8c2-30f3-4ce0-96ef-1db081620145)

### Light color scheme
![Algolia DocSearch on MantineDataTable docs website - Light color scheme - wrong](https://github.com/algolia/docsearch/assets/581999/8306fa98-ada4-419b-a219-74971d78176c)

## Expected behavior

This is what I'd like to achieve:

### Dark color scheme
![Algolia DocSearch on MantineDataTable docs website - Dark color scheme - correct](https://github.com/algolia/docsearch/assets/581999/68045156-a496-4f8f-bcd0-fc93d3ee83fc)

### Light color scheme
![Algolia DocSearch on MantineDataTable docs website - Dark color scheme - correct](https://github.com/algolia/docsearch/assets/581999/89a20944-3c6e-467a-a8e8-592f6e2442aa)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.