Merge #264

264: fix: change input selector to id r=bidoubiwa a=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](https://github.com/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!


Co-authored-by: Colin Frick <colin+github@sonderformat.llc>

MeiliSearchBox.vue

@@ -3,6 +3,7 @@
     id="search-form"
     class="meilisearch-search-wrapper search-box"
     role="search"
+    :class="'theme-' + theme"
   >
     <input
       id="meilisearch-search-input"
@@ -17,6 +18,7 @@ export default {
   name: 'MeiliSearchBox',
   data() {
     return {
+      theme: false,
       placeholder: undefined
     }
   },
@@ -43,6 +45,7 @@ export default {
       debug: DEBUG,
       enableDarkMode: ENABLE_DARK_MODE
     }
+    this.updateTheme(options)
     this.initialize(options)
     this.placeholder =
       PLACEHOLDER || this.$site.themeConfig.searchPlaceholder || ''
@@ -72,9 +75,20 @@ export default {
     },
 
     update(options) {
+      this.updateTheme(options)
       this.$el.innerHTML =
         '<input id="meilisearch-search-input" class="search-query">'
       this.initialize(options)
+    },
+
+    updateTheme(options) {
+      if (options.enableDarkMode === true) {
+        this.theme = 'dark'
+      } else if (options.enableDarkMode === false) {
+        this.theme = 'light'
+      } else {
+        this.theme = 'auto'
+      }
     }
   }
 }
@@ -83,6 +97,55 @@ export default {
 <style lang="stylus">
 @require './styles/palette.styl'
 
+light-input()
+  color lighten($textColor, 25%)
+  border 1px solid darken($borderColor, 10%)
+  background-color #fff
+  &:focus
+    border-color $accentColor
+
+dark-input()
+  color $textDarkColor
+  border 1px solid $borderDarkColor
+  background-color $inputDarkBgColor
+  &:focus
+    border-color $accentDarkColor
+
+// Searchbox
+#meilisearch-search-input
+  cursor text
+  width 10rem
+  height: 2rem
+  display inline-block
+  border-radius 2rem
+  font-size 0.9rem
+  line-height 2rem
+  padding 0 0.5rem 0 2rem
+  outline none
+  transition border .2s ease
+  background: url(assets/search.svg) 0.6rem 0.5rem no-repeat
+  &:focus
+    cursor auto
+  background-size 1rem
+
+.meilisearch-search-wrapper.theme-light
+  #meilisearch-search-input
+    light-input()
+
+.meilisearch-search-wrapper.theme-dark
+  #meilisearch-search-input
+    dark-input()
+
+@media (prefers-color-scheme: dark)
+  .meilisearch-search-wrapper.theme-auto
+    #meilisearch-search-input
+      dark-input()
+
+@media (prefers-color-scheme: light)
+  .meilisearch-search-wrapper.theme-auto
+    #meilisearch-search-input
+      light-input()
+
 .meilisearch-search-wrapper
   display: inline-block;
   position: relative;
@@ -93,25 +156,6 @@ export default {
     background rgba($accentColor, 0.05)
   .meilisearch-autocomplete
     line-height: 2
-    // Searchbox
-    input
-      cursor text
-      width 10rem
-      height: 2rem
-      color lighten($textColor, 25%)
-      display inline-block
-      border 1px solid darken($borderColor, 10%)
-      border-radius 2rem
-      font-size 0.9rem
-      line-height 2rem
-      padding 0 0.5rem 0 2rem
-      outline none
-      transition all .2s ease
-      &:focus
-        cursor auto
-        border-color $accentColor
-      background #fff url(assets/search.svg) 0.6rem 0.5rem no-repeat
-      background-size 1rem
 
     // Layout "columns"
     .docs-searchbar-suggestion:not(.suggestion-layout-simple)
@@ -177,14 +221,6 @@ export default {
       .dsb-dropdown-menu [class^=dsb-dataset-], .docs-searchbar-suggestion
         background $dropdownBgDarkColor
 
-      // Searchbox
-      input
-        color $textDarkColor
-        border 1px solid $borderDarkColor
-        background-color $inputDarkBgColor
-        &:focus
-          border-color $accentDarkColor
-
       // Layout "columns"
       .docs-searchbar-suggestion:not(.suggestion-layout-simple)
         border-color $borderDarkColor

tests/MeiliSearchBoxTest.js

@@ -14,7 +14,7 @@ describe('MeiliSearchBox', () => {
 
   it('renders default form and input', () => {
     expect(wrapper.html()).toContain(
-      '<form id="search-form" role="search" class="meilisearch-search-wrapper search-box">'
+      '<form id="search-form" role="search" class="meilisearch-search-wrapper search-box theme-light">'
     )
     expect(wrapper.html()).toContain(
       '<input id="meilisearch-search-input" class="search-query" placeholder="">'