Skip to content

Commit c151579

Browse files
mdubusmdubus
committed
Add dark mode to playground & rename variables to prevent conflicts
1 parent 133b89f commit c151579

File tree

8 files changed

+1213
-1178
lines changed

8 files changed

+1213
-1178
lines changed

‎MeiliSearchBox.vue

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -169,55 +169,58 @@ export default {
169169
// Dark theme
170170
div[data-ds-theme="dark"]
171171
.meilisearch-autocomplete
172+
.dsb-dropdown-menu [class^=dsb-dataset-], .docs-searchbar-suggestion
173+
background lighten($bgDarkColor, 10%)
174+
172175
// Searchbox
173176
input
174-
color $textDarkColor
175-
border 1px solid $borderDarkColor
176-
background-color $inputDarkBgColor
177+
color $msTextDarkColor
178+
border 1px solid $msBorderDarkColor
179+
background-color $msInputDarkBgColor
177180
&:focus
178-
border-color $accentDarkColor
181+
border-color $msAccentDarkColor
179182
180183
// Layout "columns"
181184
.docs-searchbar-suggestion:not(.suggestion-layout-simple)
182-
border-color $borderDarkColor
185+
border-color $msBorderDarkColor
183186
.docs-searchbar-suggestion--wrapper
184187
.docs-searchbar-suggestion--highlight
185-
color $accentDarkColor
188+
color $msAccentDarkColor
186189
.docs-searchbar-suggestion--category-header
187-
background $accentDarkColor
190+
background $msAccentDarkColor
188191
.docs-searchbar-suggestion--highlight
189-
background lighten($accentDarkColor, 20%)
192+
background lighten($msAccentDarkColor, 20%)
190193
.docs-searchbar-suggestion--title
191-
color $textDarkColor
194+
color $msTextDarkColor
192195
.docs-searchbar-suggestion--subcategory-column
193-
border-color $borderDarkColor // Simple ?
196+
border-color $msBorderDarkColor // Simple ?
194197
.docs-searchbar-suggestion--subcategory-column-text
195-
color $textDarkColor
198+
color $msTextDarkColor
196199
.docs-searchbar-suggestion--text
197200
.docs-searchbar-suggestion--highlight
198-
box-shadow inset 0 -2px 0 0 lighten($accentDarkColor, 20%)
201+
box-shadow inset 0 -2px 0 0 lighten($msAccentDarkColor, 20%)
199202
200203
// Layout "simple"
201204
.suggestion-layout-simple
202205
.docs-searchbar-suggestion--category-header
203206
.docs-searchbar-suggestion--category-header-lvl0, .docs-searchbar-suggestion--category-header-lvl1
204207
.docs-searchbar-suggestion--highlight
205-
box-shadow inset 0 -2px 0 0 darken($accentDarkColor, 10%)
208+
box-shadow inset 0 -2px 0 0 darken($msAccentDarkColor, 10%)
206209
.docs-searchbar-suggestion--title
207210
.docs-searchbar-suggestion--highlight
208-
color lighten($accentDarkColor, 20%)
209-
background rgba($accentDarkColor, 10%)
211+
color lighten($msAccentDarkColor, 20%)
212+
background rgba($msAccentDarkColor, 10%)
210213
.docs-searchbar-suggestion--category-header-lvl0, .docs-searchbar-suggestion--category-header-lvl1
211214
.docs-searchbar-suggestion--highlight
212215
color inherit
213216
214217
// Suggestion on hover
215218
.dsb-dropdown-menu .dsb-suggestions .dsb-cursor
216219
.docs-searchbar-suggestion.suggestion-layout-simple
217-
background-color rgba($accentDarkColor, 30%)
220+
background-color rgba($msAccentDarkColor, 30%)
218221
.docs-searchbar-suggestion:not(.suggestion-layout-simple)
219222
.docs-searchbar-suggestion--content
220-
background-color rgba($accentDarkColor, 30%)
223+
background-color rgba($msAccentDarkColor, 30%)
221224
222225
@media (min-width: $MQMobile)
223226
.meilisearch-search-wrapper

‎playground/.vuepress/config.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
module.exports = {
22
title: 'Welcome to the Playground!',
3-
'color-scheme': 'dark light',
3+
theme: 'default-prefers-color-scheme',
4+
themeConfig: {
5+
prefersTheme: 'dark'
6+
},
47
plugins: [
58
[
69
require('../../index.js'),

‎playground/.vuepress/styles/palette.styl

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11

2-
// colors
3-
$accentColor ?= #3eaf7c
4-
$accentDarkColor ?= $accentColor
2+
$msAccentDarkColor = $accentColor
53

6-
$inputDarkBgColor ?= #444d52
4+
$msInputDarkBgColor = #444d52
75

8-
$textColor ?= #2c3e50
9-
$textDarkColor ?= #eaeaea
6+
$msTextDarkColor = #eaeaea
107

11-
$borderColor ?= #eaecef
12-
$borderDarkColor ?= lighten($inputDarkBgColor, 10%)
8+
$borderDarkColor = lighten($msInputDarkBgColor, 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: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
},
1010
"dependencies": {
1111
"vuepress": "^1.4.1",
12-
"vuepress-plugin-meilisearch": "^0.0.6"
12+
"vuepress-plugin-meilisearch": "^0.0.6",
13+
"vuepress-theme-default-prefers-color-scheme": "^2.0.0"
1314
}
1415
}

‎playground/yarn.lock

Lines changed: 1171 additions & 1141 deletions
Large diffs are not rendered by default.

‎styles/palette.styl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11

2-
$accentDarkColor ?= $accentColor
2+
$msAccentDarkColor ?= $accentColor
33

4-
$inputDarkBgColor ?= #444d52
4+
$msInputDarkBgColor ?= #444d52
55

6-
$textDarkColor ?= #eaeaea
6+
$msTextDarkColor ?= #eaeaea
77

8-
$borderDarkColor ?= lighten($inputDarkBgColor, 10%)
8+
$msBorderDarkColor ?= lighten($msInputDarkBgColor, 10%)

‎yarn.lock

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1293,9 +1293,9 @@
12931293
integrity sha512-fZQQafSREFyuZcdWFAExYjBiCL7AUCdgsk80iO0q4yihYYdcIiH28CcuPTGFgLOCC8RlW49GSQxdHwZP+I7CNg==
12941294

12951295
"@types/node@*":
1296-
version "15.12.0"
1297-
resolved "https://registry.yarnpkg.com/@types/node/-/node-15.12.0.tgz#6a459d261450a300e6865faeddb5af01c3389bb3"
1298-
integrity sha512-+aHJvoCsVhO2ZCuT4o5JtcPrCPyDE3+1nvbDprYes+pPkEsbjH7AGUCNtjMOXS0fqH14t+B7yLzaqSz92FPWyw==
1296+
version "15.9.0"
1297+
resolved "https://registry.yarnpkg.com/@types/node/-/node-15.9.0.tgz#0b7f6c33ca5618fe329a9d832b478b4964d325a8"
1298+
integrity sha512-AR1Vq1Ei1GaA5FjKL5PBqblTZsL5M+monvGSZwe6sSIdGiuu7Xr/pNwWJY+0ZQuN8AapD/XMB5IzBAyYRFbocA==
12991299

13001300
"@types/normalize-package-data@^2.4.0":
13011301
version "2.4.0"
@@ -3908,9 +3908,9 @@ ejs@^2.6.1:
39083908
integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
39093909

39103910
electron-to-chromium@^1.3.723:
3911-
version "1.3.746"
3912-
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.746.tgz#4ff1251986d751ba6e0acee516e04bc205511463"
3913-
integrity sha512-3ffyGODL38apwSsIgXaWnAKNXChsjXhAmBTjbqCbrv1fBbVltuNLWh0zdrQbwK/oxPQ/Gss/kYfFAPPGu9mszQ==
3911+
version "1.3.744"
3912+
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.744.tgz#34e0da7babb325e18b50d3a0214504b12045ca85"
3913+
integrity sha512-o/vep/PvSXg+7buwCbVJXHY3zbjYVmFPwnMMnchESXgAzrfcasvbX/hQZHCFGG7YdZgdtwt1KTMyK9CyBxPbLA==
39143914

39153915
elliptic@^6.5.3:
39163916
version "6.5.4"

0 commit comments

Comments
 (0)