@@ -137,6 +137,9 @@ function switchTheme(newThemeName, saveTheme) {
137
137
}
138
138
139
139
const updateTheme = ( function ( ) {
140
+ // only listen to (prefers-color-scheme: dark) because light is the default
141
+ const mql = window . matchMedia ( "(prefers-color-scheme: dark)" ) ;
142
+
140
143
/**
141
144
* Update the current theme to match whatever the current combination of
142
145
* * the preference for using the system theme
@@ -156,7 +159,7 @@ const updateTheme = (function() {
156
159
const lightTheme = getSettingValue ( "preferred-light-theme" ) || "light" ;
157
160
const darkTheme = getSettingValue ( "preferred-dark-theme" ) || "dark" ;
158
161
159
- if ( isDarkMode ( ) ) {
162
+ if ( mql . matches ) {
160
163
use ( darkTheme , true ) ;
161
164
} else {
162
165
// prefers a light theme, or has no preference
@@ -170,37 +173,7 @@ const updateTheme = (function() {
170
173
}
171
174
}
172
175
173
- // This is always updated below to a function () => bool.
174
- let isDarkMode ;
175
-
176
- // Determine the function for isDarkMode, and if we have
177
- // `window.matchMedia`, set up an event listener on the preferred color
178
- // scheme.
179
- //
180
- // Otherwise, fall back to the prefers-color-scheme value CSS captured in
181
- // the "content" property.
182
- if ( window . matchMedia ) {
183
- // only listen to (prefers-color-scheme: dark) because light is the default
184
- const mql = window . matchMedia ( "(prefers-color-scheme: dark)" ) ;
185
-
186
- isDarkMode = ( ) => mql . matches ;
187
-
188
- if ( mql . addEventListener ) {
189
- mql . addEventListener ( "change" , updateTheme ) ;
190
- } else {
191
- // This is deprecated, see:
192
- // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
193
- mql . addListener ( updateTheme ) ;
194
- }
195
- } else {
196
- // fallback to the CSS computed value
197
- const cssContent = getComputedStyle ( document . documentElement )
198
- . getPropertyValue ( "content" ) ;
199
- // (Note: the double-quotes come from that this is a CSS value, which
200
- // might be a length, string, etc.)
201
- const cssColorScheme = cssContent || "\"light\"" ;
202
- isDarkMode = ( ) => ( cssColorScheme === "\"dark\"" ) ;
203
- }
176
+ mql . addEventListener ( "change" , updateTheme ) ;
204
177
205
178
return updateTheme ;
206
179
} ) ( ) ;
0 commit comments