meilisearch
diff --git a/‎playgrounds/html/index.html
Lines changed: 10 additions & 13 deletions b/‎playgrounds/html/index.html
Lines changed: 10 additions & 13 deletions
diff --git a/‎playgrounds/javascript/index.html
Lines changed: 2 additions & 3 deletions b/‎playgrounds/javascript/index.html
Lines changed: 2 additions & 3 deletions
diff --git a/‎src/lib/DocsSearchBar.js
Lines changed: 12 additions & 12 deletions b/‎src/lib/DocsSearchBar.js
Lines changed: 12 additions & 12 deletions
@@ -13,16 +13,12 @@
   <body>
     <div class="container">
       <div class="col-md-12">
-        <div class="docs-searchbar">
-          <div class="searchbox">
-            <input
-              type="search"
-              placeholder="docs-searchbar input"
-              class="form-control"
-              id="q"
-            />
-          </div>
-        </div>
+        <input
+          type="search"
+          placeholder="docs-searchbar input"
+          class="form-control"
+          id="q"
+        />
       </div>
     </div>
     <!-- at the end of the BODY -->
@@ -43,25 +39,26 @@
           console.info(context)
         },
         debug: true, // Set debug to true if you want to inspect the dropdown
+        enhancedSearchInput: true,
+        enableDarkMode: true,
       })
     </script>
     <style>
       .container {
         margin: 10%;
       }
 
-      div[data-ds-theme] .searchbox {
+      .searchbox[data-ds-theme] {
         width: 60%;
         margin: auto;
         margin-top: 10%;
         display: block;
       }
 
-      div[data-ds-theme] .searchbox input {
+      .searchbox[data-ds-theme] input {
         height: 34px;
         border-radius: 4px;
         font-size: 14px;
-        padding: 6px 12px;
       }
 
       @media (prefers-color-scheme: dark) {
 
@@ -34,18 +34,17 @@
         margin: 10%;
       }
 
-      div[data-ds-theme] .searchbox {
+      .searchbox[data-ds-theme] {
         width: 60%;
         margin: auto;
         margin-top: 10%;
         display: block;
       }
 
-      div[data-ds-theme] .searchbox input {
+      .searchbox[data-ds-theme] input {
         height: 34px;
         border-radius: 4px;
         font-size: 14px;
-        padding: 6px 12px;
       }
 
       @media (prefers-color-scheme: dark) {
 
@@ -97,18 +97,6 @@ class DocsSearchBar {
     this.isSimpleLayout = layout === 'simple'
     this.enableDarkMode = enableDarkMode
 
-    const isSystemInDarkMode =
-      window.matchMedia &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches
-    const searchbox = document.querySelector('.docs-searchbar')
-    if (searchbox) {
-      if (this.enableDarkMode && isSystemInDarkMode) {
-        searchbox.setAttribute('data-ds-theme', 'dark')
-      } else {
-        searchbox.setAttribute('data-ds-theme', 'light')
-      }
-    }
-
     this.client = new MeiliSearch({
       host: hostUrl,
       apiKey: this.apiKey,
@@ -129,6 +117,18 @@ class DocsSearchBar {
       },
     ])
 
+    const isSystemInDarkMode =
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+    const searchbox = document.querySelector('.searchbox')
+    console.log(searchbox)
+    if (searchbox) {
+      searchbox.setAttribute('data-ds-theme', 'light')
+      if (this.enableDarkMode && isSystemInDarkMode) {
+        searchbox.setAttribute('data-ds-theme', 'dark')
+      }
+    }
+
     const customHandleSelected = handleSelected
     this.handleSelected = customHandleSelected || this.handleSelected
Original file line number	Diff line number	Diff line change
`@@ -34,18 +34,17 @@`
`34`	`34`	`margin: 10%;`
`35`	`35`	`}`
`36`	`36`
`37`		`- div[data-ds-theme] .searchbox {`
	`37`	`+ .searchbox[data-ds-theme] {`
`38`	`38`	`width: 60%;`
`39`	`39`	`margin: auto;`
`40`	`40`	`margin-top: 10%;`
`41`	`41`	`display: block;`
`42`	`42`	`}`
`43`	`43`
`44`		`- div[data-ds-theme] .searchbox input {`
	`44`	`+ .searchbox[data-ds-theme] input {`
`45`	`45`	`height: 34px;`
`46`	`46`	`border-radius: 4px;`
`47`	`47`	`font-size: 14px;`
`48`		`- padding: 6px 12px;`
`49`	`48`	`}`
`50`	`49`
`51`	`50`	`@media (prefers-color-scheme: dark) {`