meilisearch · bors · Jun 10, 2021 · Jun 7, 2021 · Jun 8, 2021 · Jun 9, 2021
diff --git a/README.md b/README.md
@@ -186,6 +186,11 @@ 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. 
+You can always edit the style of the searchbar to match the style of your website.
+
 ##### More Examples <!-- omit in toc -->
 
 Here is a basic [HTML file](playground/index.html) used in the playground of this repository.

diff --git a/playgrounds/html/index.html b/playgrounds/html/index.html
@@ -13,13 +13,15 @@
   <body>
     <div class="container">
       <div class="col-md-12">
-        <div class="searchbox">
-          <input
-            type="search"
-            placeholder="docs-searchbar input"
-            class="form-control"
-            id="q"
-          />
+        <div class="docs-searchbar">
+          <div class="searchbox">
+            <input
+              type="search"
+              placeholder="docs-searchbar input"
+              class="form-control"
+              id="q"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -48,14 +50,14 @@
         margin: 10%;
       }
 
-      .searchbox {
+      div[data-ds-theme] .searchbox {
         width: 60%;
         margin: auto;
         margin-top: 10%;
         display: block;
       }
 
-      .searchbox input {
+      div[data-ds-theme] .searchbox input {
         height: 34px;
         border-radius: 4px;
         font-size: 14px;

diff --git a/playgrounds/javascript/index.html b/playgrounds/javascript/index.html
@@ -12,13 +12,15 @@
   <body>
     <div class="container">
       <div class="col-md-12">
-        <div class="searchbox">
-          <input
-            type="search"
-            placeholder="docs-searchbar input"
-            class="form-control"
-            id="q"
-          />
+        <div class="docs-searchbar">
+          <div class="searchbox">
+            <input
+              type="search"
+              placeholder="docs-searchbar input"
+              class="form-control"
+              id="q"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -32,14 +34,14 @@
         margin: 10%;
       }
 
-      .searchbox {
+      div[data-ds-theme] .searchbox {
         width: 60%;
         margin: auto;
         margin-top: 10%;
         display: block;
       }
 
-      .searchbox input {
+      div[data-ds-theme] .searchbox input {
         height: 34px;
         border-radius: 4px;
         font-size: 14px;

diff --git a/src/lib/DocsSearchBar.js b/src/lib/DocsSearchBar.js
@@ -40,6 +40,7 @@ class DocsSearchBar {
     handleSelected = false,
     enhancedSearchInput = false,
     layout = 'columns',
+    enableDarkMode = false,
   }) {
     DocsSearchBar.checkArguments({
       hostUrl,
@@ -55,6 +56,7 @@ class DocsSearchBar {
       handleSelected,
       enhancedSearchInput,
       layout,
+      enableDarkMode,
     })
 
     this.apiKey = apiKey
@@ -93,6 +95,19 @@ class DocsSearchBar {
       ) || ['s', 191]
 
     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,
@@ -165,6 +180,12 @@ class DocsSearchBar {
         `Error: No input element in the page matches ${args.inputSelector}`,
       )
     }
+
+    if (typeof args.enableDarkMode !== 'boolean') {
+      throw new Error(
+        `Error: "enableDarkMode" must be of type: boolean. Found type: ${typeof args.inputSelector}`,
+      )
+    }
   }
 
   static injectSearchBox(input) {

diff --git a/src/styles/_dropdown.scss b/src/styles/_dropdown.scss
@@ -109,7 +109,8 @@
   $code-background: #ebebeb,
   $responsive-breakpoint: 768px,
   $suggestion-background-color: #f8f8f8,
-  $hover-color-opacity: 0.05
+  $hover-color-opacity: 0.05,
+  $dark-mode: false
 ) {
   $header-size: 1em;
   $title-size: 0.9em;
@@ -233,7 +234,7 @@
           color: set-highlight($highlight-opacity, $main-color);
           background: rgba(mix($main-color, #fff, 60%), $highlight-opacity);
           padding: 0em 0.05em;
-          @media (prefers-color-scheme: dark) {
+          @if $dark-mode {
             color: lighten($main-color, 20%);
           }
         }
@@ -286,7 +287,7 @@
         padding: $padding/4 0;
         font-size: $header-size;
         color: $header-color;
-        @media (prefers-color-scheme: dark) {
+        @if $dark-mode {
           color: lighten($subtitle-color, 10%);
         }
       }
@@ -388,7 +389,7 @@
           font-weight: bold;
           opacity: 0.5;
           color: #02060c;
-          @media (prefers-color-scheme: dark) {
+          @if $dark-mode {
             color: $subtitle-color;
             opacity: unset;
           }
@@ -420,7 +421,7 @@
         border-bottom: solid 1px #eee;
         padding: $padding/2;
         margin: 0;
-        @media (prefers-color-scheme: dark) {
+        @if $dark-mode {
           border-bottom: solid 1px lighten($border-color, 10%);
         }
       }
@@ -446,7 +447,7 @@
           &-lvl1 {
             opacity: 0.6;
             font-size: $text-size;
-            @media (prefers-color-scheme: dark) {
+            @if $dark-mode {
               opacity: unset;
               color: lighten($subtitle-color, 10%);
             }
@@ -459,7 +460,7 @@
               width: 10px;
               height: 10px;
               display: inline-block;
-              @media (prefers-color-scheme: dark) {
+              @if $dark-mode {
                 filter: invert(1);
               }
             }
@@ -483,7 +484,7 @@
           color: $main-color;
           font-size: $title-size;
           font-weight: normal;
-          @media (prefers-color-scheme: dark) {
+          @if $dark-mode {
             color: $text-color;
           }
 
@@ -492,7 +493,7 @@
             font-weight: bold;
             color: $main-color;
             display: inline-block;
-            @media (prefers-color-scheme: dark) {
+            @if $dark-mode {
               color: $text-color;
             }
           }
@@ -511,7 +512,7 @@
             color: darken($text-color, 15%);
             font-weight: bold;
             box-shadow: none;
-            @media (prefers-color-scheme: dark) {
+            @if $dark-mode {
               color: lighten($text-color, 15%);
             }
           }
@@ -531,7 +532,7 @@
 
     .docs-searchbar-footer-logo {
       margin-bottom: 4px;
-      @media (prefers-color-scheme: dark) {
+      @if $dark-mode {
         filter: invert(1);
       }
     }

diff --git a/src/styles/_searchbox.scss b/src/styles/_searchbox.scss
@@ -36,7 +36,8 @@
   $icon-background: $input-focus-border-color,
   $icon-background-opacity: 0.1,
   $icon-clear: 'sbx-icon-clear-1',
-  $icon-clear-size: $font-size / 1.1
+  $icon-clear-size: $font-size / 1.1,
+  $dark-mode: false
 ) {
   .searchbox {
     display: inline-block;
@@ -97,8 +98,13 @@
 
       &:hover {
         box-shadow: inset 0 0 0 $border-width darken($input-border-color, 10%);
-        @media (prefers-color-scheme: dark) {
-          box-shadow: inset 0 0 0 $border-width lighten($input-border-color, 5%);
+        @if $dark-mode {
+          box-shadow: inset
+            0
+            0
+            0
+            $border-width
+            lighten($input-border-color, 5%);
         }
       }
 

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -17,6 +17,7 @@ $searchbox-config: (
   icon-background: #458ee1,
   icon-background-opacity: 0,
   icon-clear-size: 8px,
+  dark-mode: false,
 ) !default;
 
 $searchbox-config-dark: (
@@ -28,6 +29,7 @@ $searchbox-config-dark: (
   text-color: #eaeaea,
   icon-color: #6d7e96,
   icon-background: #458ee1,
+  dark-mode: true,
 ) !default;
 
 // DROPDOWN
@@ -55,6 +57,7 @@ $dropdown-config: (
   highlight-type: underline,
   suggestion-background-color: #f8f8f8,
   hover-color-opacity: 0.05,
+  dark-mode: false,
 ) !default;
 
 // Dropdown dark mode
@@ -70,6 +73,7 @@ $dropdown-config-dark: (
   highlight-color: #3881ff,
   suggestion-background-color: #6b7278,
   hover-color-opacity: 0.5,
+  dark-mode: true,
 ) !default;
 
 $builder-height: 260px;
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -6,12 +6,13 @@ $searchbox: true !default;
 
 @if ($searchbox == true) {
   @include searchbox($searchbox-config...);
-  @media (prefers-color-scheme: dark) {
-    @include searchbox($searchbox-config-dark...);
-  }
 }
-
 @include dropdown($dropdown-config...);
-@media (prefers-color-scheme: dark) {
+
+// Dark mode
+div[data-ds-theme='dark'] {
+  @if ($searchbox == true) {
+    @include searchbox($searchbox-config-dark...);
+  }
   @include dropdown($dropdown-config-dark...);
 }