Skip to content

Commit eb2e428

Browse files
committed
Add wrapper around searchbar for theming
1 parent 4fcf39b commit eb2e428

File tree

6 files changed

+355
-347
lines changed

6 files changed

+355
-347
lines changed

playgrounds/html/index.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,22 +40,21 @@
4040
},
4141
debug: true, // Set debug to true if you want to inspect the dropdown
4242
enhancedSearchInput: true,
43-
enableDarkMode: true,
4443
})
4544
</script>
4645
<style>
4746
.container {
4847
margin: 10%;
4948
}
5049

51-
.searchbox[data-ds-theme] {
50+
div [data-ds-theme] .searchbox {
5251
width: 60%;
5352
margin: auto;
5453
margin-top: 10%;
5554
display: block;
5655
}
5756

58-
.searchbox[data-ds-theme] input {
57+
div [data-ds-theme] .searchbox input {
5958
height: 34px;
6059
border-radius: 4px;
6160
font-size: 14px;

src/lib/DocsSearchBar.js

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,8 @@ class DocsSearchBar {
102102
apiKey: this.apiKey,
103103
})
104104

105+
DocsSearchBar.addThemeWrapper(inputSelector, this.enableDarkMode)
106+
105107
if (enhancedSearchInput) {
106108
this.input = DocsSearchBar.injectSearchBox(this.input)
107109
}
@@ -117,18 +119,6 @@ class DocsSearchBar {
117119
},
118120
])
119121

120-
const isSystemInDarkMode =
121-
window.matchMedia &&
122-
window.matchMedia('(prefers-color-scheme: dark)').matches
123-
const searchbox = document.querySelector('.searchbox')
124-
console.log(searchbox)
125-
if (searchbox) {
126-
searchbox.setAttribute('data-ds-theme', 'light')
127-
if (this.enableDarkMode && isSystemInDarkMode) {
128-
searchbox.setAttribute('data-ds-theme', 'dark')
129-
}
130-
}
131-
132122
const customHandleSelected = handleSelected
133123
this.handleSelected = customHandleSelected || this.handleSelected
134124

@@ -158,6 +148,23 @@ class DocsSearchBar {
158148
}
159149
}
160150

151+
static addThemeWrapper(inputSelector, enableDarkMode) {
152+
const inputElement = document.getElementById(inputSelector.substring(1))
153+
const parent = inputElement.parentNode
154+
const wrapper = document.createElement('div')
155+
156+
const isSystemInDarkMode =
157+
window.matchMedia &&
158+
window.matchMedia('(prefers-color-scheme: dark)').matches
159+
160+
wrapper.setAttribute(
161+
'data-ds-theme',
162+
inputElement && enableDarkMode && isSystemInDarkMode ? 'dark' : 'light',
163+
)
164+
parent.replaceChild(wrapper, inputElement)
165+
wrapper.appendChild(inputElement)
166+
}
167+
161168
/**
162169
* Checks that the passed arguments are valid. Will throw errors otherwise
163170
* @function checkArguments

0 commit comments

Comments
 (0)