fix: change input selector to id

[ColinFrick]

Pull Request

Related issue

Fixes #263

What does this PR do?

• Change the selector to the input id, therefor applying the styling even before the docs-searchbar.js is initialized.

This does require a change in meilisearch/documentation because this does not handle @media (prefers-color-scheme: dark)

PR checklist

Please check if your PR fulfills the following requirements:

• [x] Does this PR fix an existing issue, or have you listed the changes applied in the PR description (and why they are needed)?
• [x] Have you read the contributing guidelines?
• [x] Have you made sure that the title is accurate and descriptive of the changes?

Thank you so much for contributing to Meilisearch!

[bidoubiwa]

Hey @ColinFrick thanks again for contributing :) Unfortunately if it is not compatible with the dark mode we cannot add it. Do you think this is something that can be done?

[ColinFrick]

@bidoubiwa the inconsistencies result from the different types of applying the dark / light mode styling in docs-searchbar.js and the documentation CSS. docs-searchbar.js uses [data-ds-theme] to determine the theme, while the documentation page uses (prefers-color-scheme: dark) directly.

Hm, because we set the theme through the plugin, it should be possible to apply the corresponding theme on the plugin tag directly without waiting for docs-searchbar.js to be initialized.

[ColinFrick]

@bidoubiwa I have changed the PR. This should cover any combination of prefers-color-scheme / enableDarkMode, and does not require any changes in the documentation repository.

[bidoubiwa]

docs-searchbar.js uses [data-ds-theme] to determine the theme, while the documentation page uses (prefers-color-scheme: dark) directly.

Do you think it is worth to change that in docs-searchbar.js ? As it is not exposed to the user.

[ColinFrick]

Even if we change docs-searchbar.js we still would need it here. It really comes down to that split second between rendering the DOM (with Vue component) and wrapping the component with docs-searchbar.js

[bidoubiwa]

bors merge

[bidoubiwa]

bors r-

[bidoubiwa]

bors merge

[meili-bors[bot]]

Build succeeded:

• linter-check
• Tests (Node.js 12)
• Tests (Node.js 14)

[bidoubiwa]

Thanks again for contributing with Meilisearch :heart: If you are participating in Hacktoberfest, and you would like to receive a small gift from Meilisearch too, don't forget to fill this form.