Skip to content

Commit 430a1b8

Browse files
bors[bot]mdubus
bors[bot]
and
mdubus
authored
Merge #164
164: Add dark mode r=bidoubiwa a=mdubus Closes #127 ## What's inside this PR ? Dark mode support as requested in #127. 3 more changes were made : - Upgrade of `docs-searchbar` version inside the`package.json` (v1.3.0) - Removal of the surrounding `.search-box` div according to [this PR](https://github.com/meilisearch/docs-searchbar.js/pull/366/files) - Exposure of the `debug` option which was available in `docs-searchbar` but not in this plugin ## How to test ? ### Run the playground You can run the playground with `yarn serve` ### Change the color palette If you want to change the color palette, you can do so by changing the colors inside the `playground/.vuepress/styles/palette.styl` file ### Enable / disable dark mode You can also enable/disable the dark mode (disabled by default) by adding/removing the `enableDarkMode` option in the `playground/.vuepress/config.js` file (don't forget to restart the server !): <img width="682" alt="Capture d’écran 2021-06-23 à 08 46 27" src="https://user-images.githubusercontent.com/30866152/123049333-badb7d80-d3ff-11eb-845e-a80b8a7368b4.png"> ## Screenshots Column layout (default) ![layout columns](https://user-images.githubusercontent.com/30866152/122920289-84e7bc00-d361-11eb-9065-d3e792254c5a.png) Simple layout ![layout simple](https://user-images.githubusercontent.com/30866152/122920314-8a450680-d361-11eb-8a11-2187f0cf9420.png) Change `$accentDarkColor` to `#a29bfe` (full change of the dark theme, cohabitation with the `vuepress-theme-default-prefers-color-scheme` plugin) ![change all colors](https://user-images.githubusercontent.com/30866152/122920585-d8f2a080-d361-11eb-8bed-6183e3e657ba.png) Co-authored-by: Morgane Dubus <[email protected]> Co-authored-by: Morgane Dubus <[email protected]>
2 parents 5536a36 + 6827758 commit 430a1b8

File tree

13 files changed

+162
-206
lines changed

13 files changed

+162
-206
lines changed

‎.eslintrc.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ module.exports = {
1414
CROP_LENGTH: 'readonly',
1515
HOT_KEYS: 'readonly',
1616
PLACEHOLDER: 'readonly',
17-
LAYOUT: 'readonly'
17+
LAYOUT: 'readonly',
18+
DEBUG: 'readonly',
19+
ENABLE_DARK_MODE: 'readonly'
1820
},
1921
parserOptions: {
2022
parser: 'babel-eslint',

‎MeiliSearchBox.vue‎

Lines changed: 87 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,9 @@ export default {
3838
autocompleteOptions: {
3939
keyboardShortcuts: HOT_KEYS
4040
},
41-
layout: LAYOUT
41+
layout: LAYOUT,
42+
debug: DEBUG,
43+
enableDarkMode: ENABLE_DARK_MODE
4244
}
4345
this.initialize(options)
4446
this.placeholder =
@@ -78,28 +80,7 @@ export default {
7880
</script>
7981

8082
<style lang="stylus">
81-
.search-box
82-
display inline-block
83-
position relative
84-
margin-right 1rem
85-
input
86-
cursor text
87-
width 10rem
88-
height: 2rem
89-
color lighten($textColor, 25%)
90-
display inline-block
91-
border 1px solid darken($borderColor, 10%)
92-
border-radius 2rem
93-
font-size 0.9rem
94-
line-height 2rem
95-
padding 0 0.5rem 0 2rem
96-
outline none
97-
transition all .2s ease
98-
&:focus
99-
cursor auto
100-
border-color $accentColor
101-
background #fff url(assets/search.svg) 0.6rem 0.5rem no-repeat
102-
background-size 1rem
83+
@require './styles/palette.styl'
10384
10485
.meilisearch-search-wrapper
10586
& > span
@@ -108,6 +89,27 @@ export default {
10889
background rgba($accentColor, 0.05)
10990
.meilisearch-autocomplete
11091
line-height 2
92+
// Searchbox
93+
input
94+
cursor text
95+
width 10rem
96+
height: 2rem
97+
color lighten($textColor, 25%)
98+
display inline-block
99+
border 1px solid darken($borderColor, 10%)
100+
border-radius 2rem
101+
font-size 0.9rem
102+
line-height 2rem
103+
padding 0 0.5rem 0 2rem
104+
outline none
105+
transition all .2s ease
106+
&:focus
107+
cursor auto
108+
border-color $accentColor
109+
background #fff url(assets/search.svg) 0.6rem 0.5rem no-repeat
110+
background-size 1rem
111+
112+
// Layout "columns"
111113
.docs-searchbar-suggestion:not(.suggestion-layout-simple)
112114
border-color $borderColor
113115
.docs-searchbar-suggestion--category-header
@@ -121,6 +123,7 @@ export default {
121123
box-shadow none
122124
background lighten($accentColor, 70%)
123125
.docs-searchbar-suggestion--wrapper
126+
display flex
124127
padding 0
125128
.docs-searchbar-suggestion--highlight
126129
color darken($accentColor, 20%)
@@ -135,6 +138,8 @@ export default {
135138
.docs-searchbar-suggestion--highlight
136139
box-shadow inset 0 -2px 0 0 lighten($accentColor, 20%)
137140
color: inherit
141+
142+
// Layout simple
138143
.suggestion-layout-simple
139144
.docs-searchbar-suggestion--title
140145
color: $accentColor
@@ -150,16 +155,74 @@ export default {
150155
background-color: transparent
151156
box-shadow inset 0 -2px 0 0 lighten($accentColor, 20%)
152157
color inherit
158+
159+
// Footer
153160
.docs-searchbar-footer
154161
display flex !important
155162
justify-content space-between !important
156163
align-items center !important
157164
.docs-searchbar-footer-logo
158165
margin-bottom -4px
159166
.dsb-cursor .docs-searchbar-suggestion--content
160-
background-color #e7edf3 !important
167+
background-color #e7edf3
161168
color $textColor
162169
170+
// Dark theme
171+
div[data-ds-theme="dark"]
172+
.meilisearch-autocomplete
173+
.dsb-dropdown-menu [class^=dsb-dataset-], .docs-searchbar-suggestion
174+
background $dropdownBgDarkColor
175+
176+
// Searchbox
177+
input
178+
color $textDarkColor
179+
border 1px solid $borderDarkColor
180+
background-color $inputDarkBgColor
181+
&:focus
182+
border-color $accentDarkColor
183+
184+
// Layout "columns"
185+
.docs-searchbar-suggestion:not(.suggestion-layout-simple)
186+
border-color $borderDarkColor
187+
.docs-searchbar-suggestion--wrapper
188+
.docs-searchbar-suggestion--highlight
189+
color $accentDarkColor
190+
.docs-searchbar-suggestion--category-header
191+
background $accentDarkColor
192+
.docs-searchbar-suggestion--highlight
193+
background lighten($accentDarkColor, 20%)
194+
.docs-searchbar-suggestion--title
195+
color $textDarkColor
196+
.docs-searchbar-suggestion--subcategory-column
197+
border-color $borderDarkColor // Simple ?
198+
.docs-searchbar-suggestion--subcategory-column-text
199+
color $textDarkColor
200+
.docs-searchbar-suggestion--text
201+
.docs-searchbar-suggestion--highlight
202+
box-shadow inset 0 -2px 0 0 lighten($accentDarkColor, 20%)
203+
204+
// Layout "simple"
205+
.suggestion-layout-simple
206+
.docs-searchbar-suggestion--category-header
207+
.docs-searchbar-suggestion--category-header-lvl0, .docs-searchbar-suggestion--category-header-lvl1
208+
.docs-searchbar-suggestion--highlight
209+
box-shadow inset 0 -2px 0 0 darken($accentDarkColor, 10%)
210+
.docs-searchbar-suggestion--title
211+
.docs-searchbar-suggestion--highlight
212+
color lighten($accentDarkColor, 20%)
213+
background rgba($accentDarkColor, 10%)
214+
.docs-searchbar-suggestion--category-header-lvl0, .docs-searchbar-suggestion--category-header-lvl1
215+
.docs-searchbar-suggestion--highlight
216+
color inherit
217+
218+
// Suggestion on hover
219+
.dsb-dropdown-menu .dsb-suggestions .dsb-cursor
220+
.docs-searchbar-suggestion.suggestion-layout-simple
221+
background-color rgba($accentDarkColor, 30%)
222+
.docs-searchbar-suggestion:not(.suggestion-layout-simple)
223+
.docs-searchbar-suggestion--content
224+
background-color rgba($accentDarkColor, 30%)
225+
163226
@media (min-width: $MQMobile)
164227
.meilisearch-search-wrapper
165228
.meilisearch-autocomplete

‎README.md‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,13 +111,32 @@ module.exports = {
111111
maxSuggestions: 10, // Default: 5
112112
hotKeys: [], // Default: ['s', '/']
113113
cropLength: 50, // Default: 30
114-
layout: 'simple' // Default: "columns"
114+
layout: 'simple', // Default: "columns"
115+
debug: true, // Default: false
116+
enableDarkMode: true // Default: false
115117
}
116118
]
117119
]
118120
}
119121
```
120122

123+
#### Dark mode
124+
125+
You can enable dark mode by adding `enableDarkMode: true` to your configuration file.
126+
127+
To override the default theme of the search bar, you can edit your `.vuepress/styles/palette.styl` file.<br>
128+
A few variables are available:
129+
130+
```js
131+
$accentDarkColor
132+
$inputDarkBgColor
133+
$textDarkColor
134+
$borderDarkColor
135+
$dropdownBgDarkColor
136+
```
137+
138+
You can also find an example in our [playground's `palette.styl` file](./playground/.vuepress/styles/palette.styl)
139+
121140
## Compatibility with MeiliSearch
122141

123142
This package only guarantees the compatibility with the [version v0.20.0 of MeiliSearch](https://github.com/meilisearch/MeiliSearch/releases/tag/v0.20.0).

‎index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ module.exports = (options) => {
1313
MAX_SUGGESTIONS: options.maxSuggestions || null,
1414
HOT_KEYS: options.hotKeys || ['s', '/'],
1515
CROP_LENGTH: options.cropLength || 30,
16-
LAYOUT: options.layout || 'columns'
16+
LAYOUT: options.layout || 'columns',
17+
DEBUG: options.debug || false,
18+
ENABLE_DARK_MODE: options.enableDarkMode || false
1719
}
1820
}
1921
}

‎jest.config.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ module.exports = {
1414
MAX_SUGGESTIONS: null,
1515
HOT_KEYS: ['s', '/'],
1616
CROP_LENGTH: 30,
17-
LAYOUT: 'columns'
17+
LAYOUT: 'columns',
18+
DEBUG: false,
19+
ENABLE_DARK_MODE: false
1820
}
1921
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
},
1212
"main": "index.js",
1313
"dependencies": {
14-
"docs-searchbar.js": "^1.2.0"
14+
"docs-searchbar.js": "^1.3.0"
1515
},
1616
"resolutions": {
1717
"yargs-parser": "^13.1.2"

‎playground/.vuepress/config.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
module.exports = {
22
title: 'Welcome to the Playground!',
3+
theme: 'default-prefers-color-scheme',
4+
themeConfig: {
5+
prefersTheme: 'dark'
6+
},
37
plugins: [
48
[
59
require('../../index.js'),
@@ -8,9 +12,11 @@ module.exports = {
812
hostUrl: 'https://docs-search-bar.meilisearch.com',
913
apiKey:
1014
'd79226ae89f29d4dadba8d0c30c240e435f584fb83a7ae573b13eb62edec35cd',
11-
indexUid: 'docs'
15+
indexUid: 'docs',
16+
debug: true,
17+
enableDarkMode: true
1218
// "maxSuggestions": 10,
13-
// "placeholder": "Search as you type..."
19+
// placeholder: 'Search as you type...'
1420
}
1521
]
1622
]

‎playground/.vuepress/styles/palette.styl‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
$accentDarkColor = #a29bfe
3+
4+
$inputDarkBgColor = #444d52
5+
6+
$textDarkColor = #eaeaea
7+
8+
$borderDarkColor = lighten($inputDarkBgColor, 10%)

‎playground/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
# MeiliSearch and vuepress
22

33
Use the search bar to test the plugin!
4+
5+
[I'm a link](/)

‎playground/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99
},
1010
"dependencies": {
1111
"vuepress": "^1.4.1",
12-
"vuepress-plugin-meilisearch": "^0.0.6"
12+
"vuepress-theme-default-prefers-color-scheme": "^2.0.0"
1313
}
1414
}

0 commit comments

Comments
 (0)