meilisearch · bors · Jun 29, 2021 · Jun 1, 2021 · Jun 21, 2021 · Jun 21, 2021
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -14,7 +14,8 @@ module.exports = {
     CROP_LENGTH: 'readonly',
     HOT_KEYS: 'readonly',
     PLACEHOLDER: 'readonly',
-    LAYOUT: 'readonly'
+    LAYOUT: 'readonly',
+    ENABLE_DARK_MODE: 'readonly'
   },
   parserOptions: {
     parser: 'babel-eslint',

diff --git a/MeiliSearchBox.vue b/MeiliSearchBox.vue
@@ -38,7 +38,8 @@ export default {
       autocompleteOptions: {
         keyboardShortcuts: HOT_KEYS
       },
-      layout: LAYOUT
+      layout: LAYOUT,
+      enableDarkMode: ENABLE_DARK_MODE
     }
     this.initialize(options)
     this.placeholder =
@@ -78,28 +79,7 @@ export default {
 </script>
 
 <style lang="stylus">
-.search-box
-  display inline-block
-  position relative
-  margin-right 1rem
-  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
+@require './styles/palette.styl'
 
 .meilisearch-search-wrapper
   & > span
@@ -108,6 +88,27 @@ 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)
       border-color $borderColor
       .docs-searchbar-suggestion--category-header
@@ -121,6 +122,7 @@ export default {
           box-shadow none
           background lighten($accentColor, 70%)
       .docs-searchbar-suggestion--wrapper
+        display flex
         padding 0
         .docs-searchbar-suggestion--highlight
           color darken($accentColor, 20%)
@@ -135,6 +137,8 @@ export default {
         .docs-searchbar-suggestion--highlight
           box-shadow inset 0 -2px 0 0 lighten($accentColor, 20%)
           color: inherit
+
+    // Layout simple
     .suggestion-layout-simple
       .docs-searchbar-suggestion--title
         color: $accentColor
@@ -150,16 +154,74 @@ export default {
           background-color: transparent
           box-shadow inset 0 -2px 0 0 lighten($accentColor, 20%)
           color inherit
+
+    // Footer
     .docs-searchbar-footer
       display flex !important
       justify-content space-between !important
       align-items center !important
       .docs-searchbar-footer-logo
         margin-bottom -4px
     .dsb-cursor .docs-searchbar-suggestion--content
-      background-color #e7edf3 !important
+      background-color #e7edf3
       color $textColor
 
+  // Dark theme
+  div[data-ds-theme="dark"]
+    .meilisearch-autocomplete
+      .dsb-dropdown-menu [class^=dsb-dataset-], .docs-searchbar-suggestion
+        background lighten($bgDarkColor, 10%)
+
+      // Searchbox
+      input
+        color $msTextDarkColor
+        border 1px solid $msBorderDarkColor
+        background-color $msInputDarkBgColor
+        &:focus
+          border-color $msAccentDarkColor
+
+      // Layout "columns"
+      .docs-searchbar-suggestion:not(.suggestion-layout-simple)
+        border-color $msBorderDarkColor
+        .docs-searchbar-suggestion--wrapper
+          .docs-searchbar-suggestion--highlight
+            color $msAccentDarkColor
+        .docs-searchbar-suggestion--category-header
+          background $msAccentDarkColor
+          .docs-searchbar-suggestion--highlight
+            background lighten($msAccentDarkColor, 20%)
+        .docs-searchbar-suggestion--title
+          color $msTextDarkColor
+        .docs-searchbar-suggestion--subcategory-column
+          border-color $msBorderDarkColor // Simple ?
+        .docs-searchbar-suggestion--subcategory-column-text
+          color $msTextDarkColor
+        .docs-searchbar-suggestion--text
+          .docs-searchbar-suggestion--highlight
+            box-shadow inset 0 -2px 0 0 lighten($msAccentDarkColor, 20%)
+
+      // Layout "simple"
+      .suggestion-layout-simple
+        .docs-searchbar-suggestion--category-header
+          .docs-searchbar-suggestion--category-header-lvl0, .docs-searchbar-suggestion--category-header-lvl1
+            .docs-searchbar-suggestion--highlight
+              box-shadow inset 0 -2px 0 0 darken($msAccentDarkColor, 10%)
+          .docs-searchbar-suggestion--title
+            .docs-searchbar-suggestion--highlight
+              color lighten($msAccentDarkColor, 20%)
+              background rgba($msAccentDarkColor, 10%)
+        .docs-searchbar-suggestion--category-header-lvl0, .docs-searchbar-suggestion--category-header-lvl1
+          .docs-searchbar-suggestion--highlight
+            color inherit
+
+      // Suggestion on hover
+      .dsb-dropdown-menu .dsb-suggestions .dsb-cursor
+        .docs-searchbar-suggestion.suggestion-layout-simple
+          background-color rgba($msAccentDarkColor, 30%)
+        .docs-searchbar-suggestion:not(.suggestion-layout-simple)
+          .docs-searchbar-suggestion--content
+            background-color rgba($msAccentDarkColor, 30%)
+
 @media (min-width: $MQMobile)
   .meilisearch-search-wrapper
     .meilisearch-autocomplete

diff --git a/README.md b/README.md
@@ -111,13 +111,30 @@ module.exports = {
         maxSuggestions: 10, // Default: 5
         hotKeys: [], // Default: ['s', '/']
         cropLength: 50, // Default: 30
-        layout: 'simple' // Default: "columns"
+        layout: 'simple', // Default: "columns"
+        enableDarkMode: true // Default: false
       }
     ]
   ]
 }
 ```
 
+#### Dark mode
+
+You can enable dark mode by adding `enableDarkMode: true` to your configuration file.
+
+To override the default theme of the searchbar, you can edit your `.vuepress/styles/palette.styl` file.
+A few variables are available :
+
+```js
+$msAccentDarkColor
+$msInputDarkBgColor
+$msTextDarkColor
+$borderDarkColor
+```
+
+You can also find an example in our [playground's `palette.styl` file](./playground/.vuepress/styles/palette.styl)
+
 ## Compatibility with MeiliSearch
 
 This package only guarantees the compatibility with the [version v0.20.0 of MeiliSearch](https://github.com/meilisearch/MeiliSearch/releases/tag/v0.20.0).

diff --git a/index.js b/index.js
@@ -13,7 +13,8 @@ module.exports = (options) => {
       MAX_SUGGESTIONS: options.maxSuggestions || null,
       HOT_KEYS: options.hotKeys || ['s', '/'],
       CROP_LENGTH: options.cropLength || 30,
-      LAYOUT: options.layout || 'columns'
+      LAYOUT: options.layout || 'columns',
+      ENABLE_DARK_MODE: options.enableDarkMode || false
     }
   }
 }
diff --git a/jest.config.js b/jest.config.js
@@ -14,6 +14,7 @@ module.exports = {
     MAX_SUGGESTIONS: null,
     HOT_KEYS: ['s', '/'],
     CROP_LENGTH: 30,
-    LAYOUT: 'columns'
+    LAYOUT: 'columns',
+    ENABLE_DARK_MODE: false
   }
 }
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   },
   "main": "index.js",
   "dependencies": {
-    "docs-searchbar.js": "^1.2.0"
+    "docs-searchbar.js": "^1.3.0"
   },
   "resolutions": {
     "yargs-parser": "^13.1.2"

diff --git a/playground/.vuepress/config.js b/playground/.vuepress/config.js
@@ -1,5 +1,9 @@
 module.exports = {
   title: 'Welcome to the Playground!',
+  theme: 'default-prefers-color-scheme',
+  themeConfig: {
+    prefersTheme: 'dark'
+  },
   plugins: [
     [
       require('../../index.js'),
@@ -8,9 +12,10 @@ module.exports = {
         hostUrl: 'https://docs-search-bar.meilisearch.com',
         apiKey:
           'd79226ae89f29d4dadba8d0c30c240e435f584fb83a7ae573b13eb62edec35cd',
-        indexUid: 'docs'
+        indexUid: 'docs',
+        enableDarkMode: true
         // "maxSuggestions": 10,
-        // "placeholder": "Search as you type..."
+        // placeholder: 'Search as you type...'
       }
     ]
   ]

diff --git a/playground/.vuepress/styles/palette.styl b/playground/.vuepress/styles/palette.styl
@@ -0,0 +1,8 @@
+
+$msAccentDarkColor = $accentColor
+
+$msInputDarkBgColor = #444d52
+
+$msTextDarkColor = #eaeaea
+
+$borderDarkColor = lighten($msInputDarkBgColor, 10%)
diff --git a/playground/README.md b/playground/README.md
@@ -1,3 +1,5 @@
 # MeiliSearch and vuepress
 
 Use the search bar to test the plugin!
+
+[I'm a link](/)
diff --git a/playground/package.json b/playground/package.json
@@ -9,6 +9,6 @@
   },
   "dependencies": {
     "vuepress": "^1.4.1",
-    "vuepress-plugin-meilisearch": "^0.0.6"
+    "vuepress-theme-default-prefers-color-scheme": "^2.0.0"
   }
 }