feat(v2): auto switch theme depending on the system theme (#2117)

facebook · Dec 12, 2019 · 26a3d72 · 26a3d72
1 parent aa87bc5
commit 26a3d72
Showing 1 changed file with 22 additions and 12 deletions.
diff --git a/packages/docusaurus-theme-classic/src/index.js b/packages/docusaurus-theme-classic/src/index.js
@@ -14,19 +14,29 @@ const noFlash = `(function() {
   function setDataThemeAttribute(theme) {
     document.querySelector('html').setAttribute('data-theme', theme);
   }
-  
-  var preferDarkQuery = '(prefers-color-scheme: dark)';
-  var mql = window.matchMedia(preferDarkQuery);
-  var supportsColorSchemeQuery = mql.media === preferDarkQuery;
-  var localStorageTheme = null;
-  try {
-    localStorageTheme = localStorage.getItem('${storageKey}');
-  } catch (err) {}
-  var localStorageExists = localStorageTheme !== null;
 
-  if (localStorageExists) {
-    setDataThemeAttribute(localStorageTheme);
-  } else if (supportsColorSchemeQuery && mql.matches) {
+  function getPreferredTheme() {
+    var theme = null;
+    try {
+      theme = localStorage.getItem('${storageKey}');
+    } catch (err) {}
+
+    return theme;
+  }
+
+  var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  darkQuery.addListener(function(e) {
+    if (getPreferredTheme() !== null) {
+      return;
+    }
+
+    setDataThemeAttribute(e.matches ? 'dark' : '');
+  });
+
+  var preferredTheme = getPreferredTheme();
+  if (preferredTheme !== null) {
+    setDataThemeAttribute(preferredTheme);
+  } else if (darkQuery.matches) {
     setDataThemeAttribute('dark');
   }
 })();`;