Description
After upgrading to DocSearch v4, it looks like the light mode button style doesn't look good, and the colors are not really accessible.
Minimal repro:
DocSearch v3 - good:
DocSearch v4 - bad:
This issue has been reported by a Docusaurus user: facebook/docusaurus#11542
Unfortunately, since the button with default style does not appear on the DocSearch playground, you probably missed the issue.
I would suggest having a playground to see how the default button displays under both light/dark modes to see the problem more easily and show the community what to expect after installing DocSearch on a newly initialized app.
By the way, the user is also interested in having a dark-mode DocSearch button, despite our HTML page having data-theme="light".
This data attribute you use for theming is kind of proprietary and/or Docusaurus-specific. Is there a way to force the dark theme on the button with a local config?
I mean something like this:
<html data-theme="light">
<body>
<button data-theme="dark" />
<button data-theme="light" />
</body>
</html>
Expected behavior
It should have more accessible colors by default, like v3 used to have:
This is what we have on our website using v4, which already had CSS variable overrides (that prevented me from seeing the issue with the default styling):
We could ship our custom site CSS as part of the Docusaurus DocSearch integration. However, this would be better if it was beautiful out of the box.
Environment
- OS: any?
- Browser: any?
- DocSearch version: v4.3.2
Description
After upgrading to DocSearch v4, it looks like the light mode button style doesn't look good, and the colors are not really accessible.
Minimal repro:
DocSearch v3 - good:
DocSearch v4 - bad:
This issue has been reported by a Docusaurus user: facebook/docusaurus#11542
Unfortunately, since the button with default style does not appear on the DocSearch playground, you probably missed the issue.
I would suggest having a playground to see how the default button displays under both light/dark modes to see the problem more easily and show the community what to expect after installing DocSearch on a newly initialized app.
By the way, the user is also interested in having a dark-mode DocSearch button, despite our HTML page having
data-theme="light".This data attribute you use for theming is kind of proprietary and/or Docusaurus-specific. Is there a way to force the dark theme on the button with a local config?
I mean something like this:
Expected behavior
It should have more accessible colors by default, like v3 used to have:
This is what we have on our website using v4, which already had CSS variable overrides (that prevented me from seeing the issue with the default styling):
We could ship our custom site CSS as part of the Docusaurus DocSearch integration. However, this would be better if it was beautiful out of the box.
Environment