@@ -137,6 +137,9 @@ function switchTheme(newThemeName, saveTheme) {
137137}
138138
139139const 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+
140143 /**
141144 * Update the current theme to match whatever the current combination of
142145 * * the preference for using the system theme
@@ -156,7 +159,7 @@ const updateTheme = (function() {
156159 const lightTheme = getSettingValue ( "preferred-light-theme" ) || "light" ;
157160 const darkTheme = getSettingValue ( "preferred-dark-theme" ) || "dark" ;
158161
159- if ( isDarkMode ( ) ) {
162+ if ( mql . matches ) {
160163 use ( darkTheme , true ) ;
161164 } else {
162165 // prefers a light theme, or has no preference
@@ -170,37 +173,7 @@ const updateTheme = (function() {
170173 }
171174 }
172175
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 ) ;
204177
205178 return updateTheme ;
206179} ) ( ) ;
0 commit comments