Skip to content

Commit 5476cb4

Browse files
bors[bot]mdubus
bors[bot]
and
mdubus
authored
Merge #355
355: Add option to enable dark mode r=bidoubiwa a=mdubus fixes: #341 ## What's wrong ? If a user has his preferences set to dark mode, but the website using `docs-searchbar` don't have support for dark mode, the website will appear in light mode except for the searchbar, which will appear in dark mode. ## What's inside this PR This PR adds an option `enableDarkMode` to allow users enable dark mode on the searchbar. It is set to `false` by default. ## How to test To switch between dark and light mode, go to `System Preferences` in your mac and then `General`. To run the project: `yarn && yarn playground` and go to `http://localhost:1234/` You can also try the searchbar with the option `layout: simple` if you want to ! ### Light mode Just run the project, and switch between light & dark mode in your system preferences. ### Dark mode Go to the project, and add `enableDarkMode: true` to the playground you want to use. Example in `playgrounds/html/index.html` : ![Capture d’écran 2021-06-09 à 11 26 21](https://user-images.githubusercontent.com/30866152/121329546-98346980-c915-11eb-8e56-a58a32ea3192.png) ## Screenshots Light mode: ![Capture d’écran 2021-06-09 à 11 31 15](https://user-images.githubusercontent.com/30866152/121330445-535d0280-c916-11eb-9264-956cd7d3370d.png) Dark mode with `enableDarkMode` set to `true`: ![Capture d’écran 2021-06-09 à 11 31 02](https://user-images.githubusercontent.com/30866152/121330419-4cce8b00-c916-11eb-8cdf-49a3a640ec43.png) Dark mode without `enableDarkMode`: - dark background kept to show that the dark mode is enabled in user's system preferences - show that even in dark mode, the searchbar is displayed in light mode if `enableDarkMode` isn't set ![Capture d’écran 2021-06-09 à 11 31 43](https://user-images.githubusercontent.com/30866152/121330629-78ea0c00-c916-11eb-8c7c-6b7da8786ce1.png) Co-authored-by: Morgane Dubus <[email protected]> Co-authored-by: Morgane Dubus <[email protected]>
2 parents 3a1aff2 + d7d48cc commit 5476cb4

File tree

8 files changed

+79
-37
lines changed

8 files changed

+79
-37
lines changed

‎README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,11 @@ docsSearchBar({
186186
})
187187
```
188188

189+
##### `enableDarkMode` <!-- omit in toc -->
190+
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.
192+
You can always edit the style of the searchbar to match the style of your website.
193+
189194
##### More Examples <!-- omit in toc -->
190195

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

‎playgrounds/html/index.html

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,15 @@
1313
<body>
1414
<div class="container">
1515
<div class="col-md-12">
16-
<div class="searchbox">
17-
<input
18-
type="search"
19-
placeholder="docs-searchbar input"
20-
class="form-control"
21-
id="q"
22-
/>
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>
2325
</div>
2426
</div>
2527
</div>
@@ -48,14 +50,14 @@
4850
margin: 10%;
4951
}
5052

51-
.searchbox {
53+
div[data-ds-theme] .searchbox {
5254
width: 60%;
5355
margin: auto;
5456
margin-top: 10%;
5557
display: block;
5658
}
5759

58-
.searchbox input {
60+
div[data-ds-theme] .searchbox input {
5961
height: 34px;
6062
border-radius: 4px;
6163
font-size: 14px;

‎playgrounds/javascript/index.html

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,15 @@
1212
<body>
1313
<div class="container">
1414
<div class="col-md-12">
15-
<div class="searchbox">
16-
<input
17-
type="search"
18-
placeholder="docs-searchbar input"
19-
class="form-control"
20-
id="q"
21-
/>
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>
2224
</div>
2325
</div>
2426
</div>
@@ -32,14 +34,14 @@
3234
margin: 10%;
3335
}
3436

35-
.searchbox {
37+
div[data-ds-theme] .searchbox {
3638
width: 60%;
3739
margin: auto;
3840
margin-top: 10%;
3941
display: block;
4042
}
4143

42-
.searchbox input {
44+
div[data-ds-theme] .searchbox input {
4345
height: 34px;
4446
border-radius: 4px;
4547
font-size: 14px;

‎src/lib/DocsSearchBar.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ class DocsSearchBar {
4040
handleSelected = false,
4141
enhancedSearchInput = false,
4242
layout = 'columns',
43+
enableDarkMode = false,
4344
}) {
4445
DocsSearchBar.checkArguments({
4546
hostUrl,
@@ -55,6 +56,7 @@ class DocsSearchBar {
5556
handleSelected,
5657
enhancedSearchInput,
5758
layout,
59+
enableDarkMode,
5860
})
5961

6062
this.apiKey = apiKey
@@ -93,6 +95,19 @@ class DocsSearchBar {
9395
) || ['s', 191]
9496

9597
this.isSimpleLayout = layout === 'simple'
98+
this.enableDarkMode = enableDarkMode
99+
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+
}
96111

97112
this.client = new MeiliSearch({
98113
host: hostUrl,
@@ -165,6 +180,12 @@ class DocsSearchBar {
165180
`Error: No input element in the page matches ${args.inputSelector}`,
166181
)
167182
}
183+
184+
if (typeof args.enableDarkMode !== 'boolean') {
185+
throw new Error(
186+
`Error: "enableDarkMode" must be of type: boolean. Found type: ${typeof args.inputSelector}`,
187+
)
188+
}
168189
}
169190

170191
static injectSearchBox(input) {

‎src/styles/_dropdown.scss

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,8 @@
109109
$code-background: #ebebeb,
110110
$responsive-breakpoint: 768px,
111111
$suggestion-background-color: #f8f8f8,
112-
$hover-color-opacity: 0.05
112+
$hover-color-opacity: 0.05,
113+
$dark-mode: false
113114
) {
114115
$header-size: 1em;
115116
$title-size: 0.9em;
@@ -233,7 +234,7 @@
233234
color: set-highlight($highlight-opacity, $main-color);
234235
background: rgba(mix($main-color, #fff, 60%), $highlight-opacity);
235236
padding: 0em 0.05em;
236-
@media (prefers-color-scheme: dark) {
237+
@if $dark-mode {
237238
color: lighten($main-color, 20%);
238239
}
239240
}
@@ -286,7 +287,7 @@
286287
padding: $padding/4 0;
287288
font-size: $header-size;
288289
color: $header-color;
289-
@media (prefers-color-scheme: dark) {
290+
@if $dark-mode {
290291
color: lighten($subtitle-color, 10%);
291292
}
292293
}
@@ -388,7 +389,7 @@
388389
font-weight: bold;
389390
opacity: 0.5;
390391
color: #02060c;
391-
@media (prefers-color-scheme: dark) {
392+
@if $dark-mode {
392393
color: $subtitle-color;
393394
opacity: unset;
394395
}
@@ -420,7 +421,7 @@
420421
border-bottom: solid 1px #eee;
421422
padding: $padding/2;
422423
margin: 0;
423-
@media (prefers-color-scheme: dark) {
424+
@if $dark-mode {
424425
border-bottom: solid 1px lighten($border-color, 10%);
425426
}
426427
}
@@ -446,7 +447,7 @@
446447
&-lvl1 {
447448
opacity: 0.6;
448449
font-size: $text-size;
449-
@media (prefers-color-scheme: dark) {
450+
@if $dark-mode {
450451
opacity: unset;
451452
color: lighten($subtitle-color, 10%);
452453
}
@@ -459,7 +460,7 @@
459460
width: 10px;
460461
height: 10px;
461462
display: inline-block;
462-
@media (prefers-color-scheme: dark) {
463+
@if $dark-mode {
463464
filter: invert(1);
464465
}
465466
}
@@ -483,7 +484,7 @@
483484
color: $main-color;
484485
font-size: $title-size;
485486
font-weight: normal;
486-
@media (prefers-color-scheme: dark) {
487+
@if $dark-mode {
487488
color: $text-color;
488489
}
489490

@@ -492,7 +493,7 @@
492493
font-weight: bold;
493494
color: $main-color;
494495
display: inline-block;
495-
@media (prefers-color-scheme: dark) {
496+
@if $dark-mode {
496497
color: $text-color;
497498
}
498499
}
@@ -511,7 +512,7 @@
511512
color: darken($text-color, 15%);
512513
font-weight: bold;
513514
box-shadow: none;
514-
@media (prefers-color-scheme: dark) {
515+
@if $dark-mode {
515516
color: lighten($text-color, 15%);
516517
}
517518
}
@@ -531,7 +532,7 @@
531532

532533
.docs-searchbar-footer-logo {
533534
margin-bottom: 4px;
534-
@media (prefers-color-scheme: dark) {
535+
@if $dark-mode {
535536
filter: invert(1);
536537
}
537538
}

‎src/styles/_searchbox.scss

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@
3636
$icon-background: $input-focus-border-color,
3737
$icon-background-opacity: 0.1,
3838
$icon-clear: 'sbx-icon-clear-1',
39-
$icon-clear-size: $font-size / 1.1
39+
$icon-clear-size: $font-size / 1.1,
40+
$dark-mode: false
4041
) {
4142
.searchbox {
4243
display: inline-block;
@@ -97,8 +98,13 @@
9798

9899
&:hover {
99100
box-shadow: inset 0 0 0 $border-width darken($input-border-color, 10%);
100-
@media (prefers-color-scheme: dark) {
101-
box-shadow: inset 0 0 0 $border-width lighten($input-border-color, 5%);
101+
@if $dark-mode {
102+
box-shadow: inset
103+
0
104+
0
105+
0
106+
$border-width
107+
lighten($input-border-color, 5%);
102108
}
103109
}
104110

‎src/styles/_variables.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ $searchbox-config: (
1717
icon-background: #458ee1,
1818
icon-background-opacity: 0,
1919
icon-clear-size: 8px,
20+
dark-mode: false,
2021
) !default;
2122

2223
$searchbox-config-dark: (
@@ -28,6 +29,7 @@ $searchbox-config-dark: (
2829
text-color: #eaeaea,
2930
icon-color: #6d7e96,
3031
icon-background: #458ee1,
32+
dark-mode: true,
3133
) !default;
3234

3335
// DROPDOWN
@@ -55,6 +57,7 @@ $dropdown-config: (
5557
highlight-type: underline,
5658
suggestion-background-color: #f8f8f8,
5759
hover-color-opacity: 0.05,
60+
dark-mode: false,
5861
) !default;
5962

6063
// Dropdown dark mode
@@ -70,6 +73,7 @@ $dropdown-config-dark: (
7073
highlight-color: #3881ff,
7174
suggestion-background-color: #6b7278,
7275
hover-color-opacity: 0.5,
76+
dark-mode: true,
7377
) !default;
7478

7579
$builder-height: 260px;

‎src/styles/main.scss

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@ $searchbox: true !default;
66

77
@if ($searchbox == true) {
88
@include searchbox($searchbox-config...);
9-
@media (prefers-color-scheme: dark) {
10-
@include searchbox($searchbox-config-dark...);
11-
}
129
}
13-
1410
@include dropdown($dropdown-config...);
15-
@media (prefers-color-scheme: dark) {
11+
12+
// Dark mode
13+
div[data-ds-theme='dark'] {
14+
@if ($searchbox == true) {
15+
@include searchbox($searchbox-config-dark...);
16+
}
1617
@include dropdown($dropdown-config-dark...);
1718
}

0 commit comments

Comments
 (0)