Conversation
src/css/custom.css
Outdated
| /* DocSearch modal theme */ | ||
| html[data-theme='dark'], html { | ||
| --docsearch-primary-color: var(--color-primary); | ||
| --docsearch-highlight-color: var(--color-primary) !important; |
There was a problem hiding this comment.
!important being required on any of these variable assignments would be somewhat surprising.
src/css/custom.css
Outdated
| } | ||
|
|
||
| .DocSearch-Modal { | ||
| border-radius: var(--radius-lg) !important; |
There was a problem hiding this comment.
The amount of !important being used here is questionable. Is this coming from docusaurus/algolia docs?
There was a problem hiding this comment.
DocSearch injects its own CSS dynamically via JavaScript after our custom.css loads, the only way to override them from a static stylesheet is !important. I could try swizzling the search component if you'd prefer that?
There was a problem hiding this comment.
the only way to override them from a static stylesheet is !important
Not true unless the styles are assigned on the element itself (in which case yeah, swizzling is probably better). CSS precedence rules are the primary way to override styles. For example .docs-page .DocSearch-Modal is stronger than just .DocSearch-Modal, which is a weaker selector. Load order is only the tie breaker in the case of equivalent precedence.
Would be good to compare to another project using this component and seeing what their custom styles look like.
There was a problem hiding this comment.
Got it, Claude had me certain that wasn't the case. I've changed the approach in the latest commit
There was a problem hiding this comment.
Did you find another project to take inspiration from?
There was a problem hiding this comment.
No but I found the docs and referenced that https://www.mintlify.com/algolia/docsearch/concepts/styling
There was a problem hiding this comment.
Seems like those are 3rd party AI generated docs, no?
- Configure Algolia DocSearch (appId, apiKey, indexName) in themeConfig - Show search bar only on /docs pages using CSS class selectors - Style DocSearch button and modal to match site dark theme - Position search left of Download button in navbar - Hide Download button on mobile for docs pages to prevent overlap Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
kaci8
force-pushed
the
algolia-docs-search
branch
from
f90457c to
51f30d1
Compare
- Replace !important with higher-specificity selectors (body prefix, html[data-theme='dark']:root for variables) - Fix modal inner elements clipping by restoring overflow: hidden on DocSearch-Modal - Fix search bar visibility on non-docs pages using body .DocSearch-Button selector - Add algolia-site-verification meta tag - Simplify html[data-theme='dark'], html selector to just html Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Kaci Lambeth <97469517+kaci8@users.noreply.github.com>
2 participants
Summary
themeConfig/docspages via CSS class selectors, hidden on home, blog, and legacy-policiesTest plan
/docspages/legacy-policiespages🤖 Generated with Claude Code