@@ -102,6 +102,8 @@ class DocsSearchBar {
102
102
apiKey : this . apiKey ,
103
103
} )
104
104
105
+ DocsSearchBar . addThemeWrapper ( inputSelector , this . enableDarkMode )
106
+
105
107
if ( enhancedSearchInput ) {
106
108
this . input = DocsSearchBar . injectSearchBox ( this . input )
107
109
}
@@ -117,18 +119,6 @@ class DocsSearchBar {
117
119
} ,
118
120
] )
119
121
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
-
132
122
const customHandleSelected = handleSelected
133
123
this . handleSelected = customHandleSelected || this . handleSelected
134
124
@@ -158,6 +148,23 @@ class DocsSearchBar {
158
148
}
159
149
}
160
150
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
+
161
168
/**
162
169
* Checks that the passed arguments are valid. Will throw errors otherwise
163
170
* @function checkArguments
0 commit comments