Skip to content
GitLab

Docs: handle light/dark mode in Algolia search modal

Merged Julien Déramond requested to merge main-jd-dark-mode-for-algolia into main

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 https://github.com/algolia/docsearch/issues/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