meilisearch · bors · Jun 15, 2021 · Jun 10, 2021 · Jun 14, 2021 · Jun 14, 2021
diff --git a/README.md b/README.md
@@ -188,9 +188,35 @@ docsSearchBar({
 
 ##### `enableDarkMode` <!-- omit in toc -->
 
-Allows you to display the searchbar in dark mode. It is useful if your website has dark mode support and you also want the searchbar to appear in a dark version. 
+Allows you to display the searchbar in dark mode. It is useful if your website has dark mode support and you also want the searchbar to appear in a dark version.
 You can always edit the style of the searchbar to match the style of your website.
 
+Example:
+
+```javascript
+docsSearchBar({
+  ...
+  enableDarkMode: true
+})
+```
+
+Dark mode with `enableDarkMode` set to `true` and system mode set to `dark`:
+
+![docs-searchbar with dark mode](assets/dark-mode.png)
+
+##### `enhancedSearchInput` <!-- omit in toc -->
+
+When set to `true`, a theme is applied to the search box to improve its appearance. It adds the `.searchbox` class which can be used to further customise the search box.
+
+Example:
+
+```javascript
+docsSearchBar({
+  ...
+  enhancedSearchInput: true
+})
+```
+
 ##### More Examples <!-- omit in toc -->
 
 Here is a basic [HTML file](playground/index.html) used in the playground of this repository.

diff --git a/assets/dark-mode.png b/assets/dark-mode.png
diff --git a/playgrounds/html/index.html b/playgrounds/html/index.html
@@ -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 {
+      div [data-ds-theme] .searchbox {
         width: 60%;
         margin: auto;
         margin-top: 10%;
         display: block;
       }
 
-      div[data-ds-theme] .searchbox input {
+      div [data-ds-theme] .searchbox input {
         height: 34px;
         border-radius: 4px;
         font-size: 14px;
-        padding: 6px 12px;
       }
 
       @media (prefers-color-scheme: dark) {

diff --git a/playgrounds/javascript/index.html b/playgrounds/javascript/index.html
@@ -12,16 +12,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 -->
@@ -34,18 +30,17 @@
         margin: 10%;
       }
 
-      div[data-ds-theme] .searchbox {
+      div [data-ds-theme] .searchbox {
         width: 60%;
         margin: auto;
         margin-top: 10%;
         display: block;
       }
 
-      div[data-ds-theme] .searchbox input {
+      div [data-ds-theme] .searchbox input {
         height: 34px;
         border-radius: 4px;
         font-size: 14px;
-        padding: 6px 12px;
       }
 
       @media (prefers-color-scheme: dark) {

diff --git a/playgrounds/javascript/src/index.js b/playgrounds/javascript/src/index.js
@@ -15,4 +15,6 @@ docsSearchBar({
     console.info(context)
   },
   debug: true, // Set debug to true if you want to inspect the dropdown
+  enhancedSearchInput: true,
+  enableDarkMode: true,
 })
diff --git a/src/lib/DocsSearchBar.js b/src/lib/DocsSearchBar.js
@@ -97,23 +97,13 @@ 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,
     })
 
+    DocsSearchBar.addThemeWrapper(inputSelector, this.enableDarkMode)
+
     if (enhancedSearchInput) {
       this.input = DocsSearchBar.injectSearchBox(this.input)
     }
@@ -158,6 +148,31 @@ class DocsSearchBar {
     }
   }
 
+  /**
+   * Wraps input selector in a docs-searchbar-js div
+   * @function addThemeWrapper
+   * @param  {string} inputSelector Selector of the input element
+   * @param  {bool} enableDarkMode Wether darkMode is enabled
+   * @returns {void}
+   */
+  static addThemeWrapper(inputSelector, enableDarkMode) {
+    const inputElement = document.querySelector(inputSelector)
+    const parent = inputElement.parentNode
+    const wrapper = document.createElement('div')
+    wrapper.className += 'docs-searchbar-js'
+    parent.replaceChild(wrapper, inputElement)
+    wrapper.appendChild(inputElement)
+
+    const isSystemInDarkMode =
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+
+    wrapper.setAttribute(
+      'data-ds-theme',
+      inputElement && enableDarkMode && isSystemInDarkMode ? 'dark' : 'light',
+    )
+  }
+
   /**
    * Checks that the passed arguments are valid. Will throw errors otherwise
    * @function checkArguments

diff --git a/src/styles/_dropdown.scss b/src/styles/_dropdown.scss
@@ -129,7 +129,6 @@
     $text-size: 0.9em;
     $subtitle-size: 1em;
   }
-
   .meilisearch-autocomplete {
     &.meilisearch-autocomplete-right .dsb-dropdown-menu {
       @include alignment-type(right);

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -21,14 +21,17 @@ $searchbox-config: (
 ) !default;
 
 $searchbox-config-dark: (
+  input-height: 32px,
+  text-color: #eaeaea,
   input-border-color: #686d71,
   input-focus-border-color: #919598,
   input-background: #444d52,
   input-focus-background: #444d52,
   placeholder-color: #bbbbbb,
-  text-color: #eaeaea,
+  icon-size: 14px,
   icon-color: #6d7e96,
   icon-background: #458ee1,
+  icon-background-opacity: 0,
   dark-mode: true,
 ) !default;