fix: change input selector to id #264
Conversation
…ase specificity, remove !important Related to meilisearch/vuepress-plugin-meilisearch#264
|
Hey @ColinFrick thanks again for contributing :) |
|
@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. |
The theme class is set according the enableDarkMode setting (auto, light, dark)
|
@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. |
Do you think it is worth to change that in docs-searchbar.js ? As it is not exposed to the user. |
|
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
|
| updateTheme(options) { | ||
| if (options.enableDarkMode === true) { | ||
| this.theme = 'dark' | ||
| } else if (options.enableDarkMode === false) { | ||
| this.theme = 'light' | ||
| } else { | ||
| this.theme = 'auto' | ||
| } |
There was a problem hiding this comment.
This is always going to be true.
I tried auto and a light theme on my computer and it is still dark mode
There was a problem hiding this comment.
Hm this does work for me (macOS Monterey 12.6, Firefox 105.0.1)
enableDarkMode: 'auto'
enableDarkMode: false
enableDarkMode: true
How are you testing it?
There was a problem hiding this comment.
Mmh, with the same computer but on chrome. Let me try again on firefox
There was a problem hiding this comment.
My bad! I forgot to change the value of enableDarkMode 🤦 Can you change it in the playground to auto ?
A bit to many reviews to do during this hacktoberfest, I'm losing focus. Sorry for that
There was a problem hiding this comment.
enableDarkMode is already 'auto' in the playground
Take your time, no rush 😉
|
bors merge |
|
bors r- |
|
bors merge |
|
Build succeeded: |
|
Thanks again for contributing with Meilisearch ❤️ |
Pull Request
Related issue
Fixes #263
What does this PR do?
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:
Thank you so much for contributing to Meilisearch!