Skip to content

Commit 94490e2

Browse files
bors[bot]mdubus
bors[bot]
and
mdubus
authored
Merge #366
366: Dark mode simplification r=bidoubiwa a=mdubus Co-authored-by: Morgane Dubus <[email protected]> Co-authored-by: Morgane Dubus <[email protected]>
2 parents b3e7a96 + d382ebb commit 94490e2

File tree

8 files changed

+78
-41
lines changed

8 files changed

+78
-41
lines changed

‎README.md

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -188,9 +188,35 @@ docsSearchBar({
188188

189189
##### `enableDarkMode` <!-- omit in toc -->
190190

191-
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.
191+
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.
192192
You can always edit the style of the searchbar to match the style of your website.
193193

194+
Example:
195+
196+
```javascript
197+
docsSearchBar({
198+
...
199+
enableDarkMode: true
200+
})
201+
```
202+
203+
Dark mode with `enableDarkMode` set to `true` and system mode set to `dark`:
204+
205+
![docs-searchbar with dark mode](assets/dark-mode.png)
206+
207+
##### `enhancedSearchInput` <!-- omit in toc -->
208+
209+
When set to `true`, a theme is applied to the search box to improve its appearance. It adds the `.searchbox` class which can be used to further customise the search box.
210+
211+
Example:
212+
213+
```javascript
214+
docsSearchBar({
215+
...
216+
enhancedSearchInput: true
217+
})
218+
```
219+
194220
##### More Examples <!-- omit in toc -->
195221

196222
Here is a basic [HTML file](playground/index.html) used in the playground of this repository.

‎assets/dark-mode.png

49.9 KB
Loading

‎playgrounds/html/index.html

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,12 @@
1313
<body>
1414
<div class="container">
1515
<div class="col-md-12">
16-
<div class="docs-searchbar">
17-
<div class="searchbox">
18-
<input
19-
type="search"
20-
placeholder="docs-searchbar input"
21-
class="form-control"
22-
id="q"
23-
/>
24-
</div>
25-
</div>
16+
<input
17+
type="search"
18+
placeholder="docs-searchbar input"
19+
class="form-control"
20+
id="q"
21+
/>
2622
</div>
2723
</div>
2824
<!-- at the end of the BODY -->
@@ -43,25 +39,26 @@
4339
console.info(context)
4440
},
4541
debug: true, // Set debug to true if you want to inspect the dropdown
42+
enhancedSearchInput: true,
43+
enableDarkMode: true
4644
})
4745
</script>
4846
<style>
4947
.container {
5048
margin: 10%;
5149
}
5250

53-
div[data-ds-theme] .searchbox {
51+
div [data-ds-theme] .searchbox {
5452
width: 60%;
5553
margin: auto;
5654
margin-top: 10%;
5755
display: block;
5856
}
5957

60-
div[data-ds-theme] .searchbox input {
58+
div [data-ds-theme] .searchbox input {
6159
height: 34px;
6260
border-radius: 4px;
6361
font-size: 14px;
64-
padding: 6px 12px;
6562
}
6663

6764
@media (prefers-color-scheme: dark) {

‎playgrounds/javascript/index.html

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,12 @@
1212
<body>
1313
<div class="container">
1414
<div class="col-md-12">
15-
<div class="docs-searchbar">
16-
<div class="searchbox">
17-
<input
18-
type="search"
19-
placeholder="docs-searchbar input"
20-
class="form-control"
21-
id="q"
22-
/>
23-
</div>
24-
</div>
15+
<input
16+
type="search"
17+
placeholder="docs-searchbar input"
18+
class="form-control"
19+
id="q"
20+
/>
2521
</div>
2622
</div>
2723
<!-- at the end of the BODY -->
@@ -34,18 +30,17 @@
3430
margin: 10%;
3531
}
3632

37-
div[data-ds-theme] .searchbox {
33+
div [data-ds-theme] .searchbox {
3834
width: 60%;
3935
margin: auto;
4036
margin-top: 10%;
4137
display: block;
4238
}
4339

44-
div[data-ds-theme] .searchbox input {
40+
div [data-ds-theme] .searchbox input {
4541
height: 34px;
4642
border-radius: 4px;
4743
font-size: 14px;
48-
padding: 6px 12px;
4944
}
5045

5146
@media (prefers-color-scheme: dark) {

‎playgrounds/javascript/src/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,6 @@ docsSearchBar({
1515
console.info(context)
1616
},
1717
debug: true, // Set debug to true if you want to inspect the dropdown
18+
enhancedSearchInput: true,
19+
enableDarkMode: true,
1820
})

‎src/lib/DocsSearchBar.js

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -97,23 +97,13 @@ class DocsSearchBar {
9797
this.isSimpleLayout = layout === 'simple'
9898
this.enableDarkMode = enableDarkMode
9999

100-
const isSystemInDarkMode =
101-
window.matchMedia &&
102-
window.matchMedia('(prefers-color-scheme: dark)').matches
103-
const searchbox = document.querySelector('.docs-searchbar')
104-
if (searchbox) {
105-
if (this.enableDarkMode && isSystemInDarkMode) {
106-
searchbox.setAttribute('data-ds-theme', 'dark')
107-
} else {
108-
searchbox.setAttribute('data-ds-theme', 'light')
109-
}
110-
}
111-
112100
this.client = new MeiliSearch({
113101
host: hostUrl,
114102
apiKey: this.apiKey,
115103
})
116104

105+
DocsSearchBar.addThemeWrapper(inputSelector, this.enableDarkMode)
106+
117107
if (enhancedSearchInput) {
118108
this.input = DocsSearchBar.injectSearchBox(this.input)
119109
}
@@ -158,6 +148,31 @@ class DocsSearchBar {
158148
}
159149
}
160150

151+
/**
152+
* Wraps input selector in a docs-searchbar-js div
153+
* @function addThemeWrapper
154+
* @param {string} inputSelector Selector of the input element
155+
* @param {bool} enableDarkMode Wether darkMode is enabled
156+
* @returns {void}
157+
*/
158+
static addThemeWrapper(inputSelector, enableDarkMode) {
159+
const inputElement = document.querySelector(inputSelector)
160+
const parent = inputElement.parentNode
161+
const wrapper = document.createElement('div')
162+
wrapper.className += 'docs-searchbar-js'
163+
parent.replaceChild(wrapper, inputElement)
164+
wrapper.appendChild(inputElement)
165+
166+
const isSystemInDarkMode =
167+
window.matchMedia &&
168+
window.matchMedia('(prefers-color-scheme: dark)').matches
169+
170+
wrapper.setAttribute(
171+
'data-ds-theme',
172+
inputElement && enableDarkMode && isSystemInDarkMode ? 'dark' : 'light',
173+
)
174+
}
175+
161176
/**
162177
* Checks that the passed arguments are valid. Will throw errors otherwise
163178
* @function checkArguments

‎src/styles/_dropdown.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,6 @@
129129
$text-size: 0.9em;
130130
$subtitle-size: 1em;
131131
}
132-
133132
.meilisearch-autocomplete {
134133
&.meilisearch-autocomplete-right .dsb-dropdown-menu {
135134
@include alignment-type(right);

‎src/styles/_variables.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,17 @@ $searchbox-config: (
2121
) !default;
2222

2323
$searchbox-config-dark: (
24+
input-height: 32px,
25+
text-color: #eaeaea,
2426
input-border-color: #686d71,
2527
input-focus-border-color: #919598,
2628
input-background: #444d52,
2729
input-focus-background: #444d52,
2830
placeholder-color: #bbbbbb,
29-
text-color: #eaeaea,
31+
icon-size: 14px,
3032
icon-color: #6d7e96,
3133
icon-background: #458ee1,
34+
icon-background-opacity: 0,
3235
dark-mode: true,
3336
) !default;
3437

0 commit comments

Comments
 (0)