diff --git a/packages/docusaurus-theme-classic/src/index.js b/packages/docusaurus-theme-classic/src/index.js
index a4757d3cc6..32c0af71c2 100644
--- a/packages/docusaurus-theme-classic/src/index.js
+++ b/packages/docusaurus-theme-classic/src/index.js
@@ -25,13 +25,6 @@ const noFlash = `(function() {
   }
 
   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) {
diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js b/packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js
index 7d3eef8b68..dcbb24e2d2 100644
--- a/packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js
+++ b/packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js
@@ -61,6 +61,18 @@ const useTheme = () => {
     }
   }, [setTheme]);
 
+  useEffect(() => {
+    if (disableDarkMode) {
+      return;
+    }
+
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addListener(({matches}) => {
+        setTheme(matches ? themes.dark : themes.light);
+      });
+  }, []);
+
   return {
     isDarkTheme: theme === themes.dark,
     setLightTheme,