Add variable to customize the background color of the dropdown

mdubus · mdubus · commit cfedfd0bac93 · 2021-06-24T10:06:53.000+02:00
diff --git a/MeiliSearchBox.vue b/MeiliSearchBox.vue
@@ -170,7 +170,7 @@ export default {
   div[data-ds-theme="dark"]
     .meilisearch-autocomplete
       .dsb-dropdown-menu [class^=dsb-dataset-], .docs-searchbar-suggestion
-        background lighten($bgDarkColor, 10%)
+        background $msDropdownBgDarkColor
 
       // Searchbox
       input
diff --git a/README.md b/README.md
@@ -131,6 +131,7 @@ $msAccentDarkColor
 $msInputDarkBgColor
 $msTextDarkColor
 $borderDarkColor
+$msDropdownBgDarkColor
 ```
 
 You can also find an example in our [playground's `palette.styl` file](./playground/.vuepress/styles/palette.styl)
diff --git a/playground/.vuepress/styles/palette.styl b/playground/.vuepress/styles/palette.styl
@@ -5,4 +5,4 @@ $msInputDarkBgColor = #444d52
 
 $msTextDarkColor = #eaeaea
 
-$borderDarkColor = lighten($msInputDarkBgColor, 10%)
+$msBorderDarkColor = lighten($msInputDarkBgColor, 10%)
diff --git a/styles/palette.styl b/styles/palette.styl
@@ -5,4 +5,6 @@ $msInputDarkBgColor ?= #444d52
 
 $msTextDarkColor ?= #eaeaea
 
-$msBorderDarkColor ?= lighten($msInputDarkBgColor, 10%)
+$msBorderDarkColor ?= lighten($msInputDarkBgColor, 10%)
+
+$msDropdownBgDarkColor ?= darken($msInputDarkBgColor, 25%)

Original file line number	Diff line number	Diff line change
`@@ -5,4 +5,4 @@ $msInputDarkBgColor = #444d52`
`5`	`5`
`6`	`6`	`$msTextDarkColor = #eaeaea`
`7`	`7`
`8`		`-$borderDarkColor = lighten($msInputDarkBgColor, 10%)`
	`8`	`+$msBorderDarkColor = lighten($msInputDarkBgColor, 10%)`