Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: handle light/dark mode in Algolia search modal #37738

Merged
merged 2 commits into from
Dec 28, 2022

Conversation

julien-deramond
Copy link
Member

@julien-deramond julien-deramond commented Dec 27, 2022

Description

This PR suggests some modifications to handle the dark mode in Algolia modal based on the values available in their CSS file.

Light mode Dark mode 
Screenshot 2022-12-27 at 22 52 03  Screenshot 2022-12-27 at 22 51 54

I preferred to avoid adding a data-theme="dark" to our <html> in the docs and rather copied the content of their CSS file in ours.

Also moved some --docsearch-* definitions in our _search.scss file to gather together this management in a single file.

Finally, had to add a patch because --docsearch-logo-color doesn't seem to work well in our case. Sounds like a bug (see algolia/docsearch#1695 where I've added a lil' comment)

⚠️ This PR doesn't tackle the visible focus (keyboard focus). We should create a dedicated issue/PR for that since it already doesn't work even in light mode.

2022-12-27 22 49 46

Motivation & Context

Simple motivation: having a light/dark mode for this modal as well.

Type of changes

  • Enhancement

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • All new and existing tests passed

Live previews

Related issues

Linked to a sub-task in #37549

@julien-deramond julien-deramond mentioned this pull request Dec 27, 2022
81 tasks
@julien-deramond julien-deramond marked this pull request as ready for review December 27, 2022 21:53
@julien-deramond julien-deramond requested a review from a team as a code owner December 27, 2022 21:53
Copy link
Member

@mdo mdo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, thanks!

@mdo mdo merged commit 993ad97 into main Dec 28, 2022
@mdo mdo deleted the main-jd-dark-mode-for-algolia branch December 28, 2022 00:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

2 participants