diff --git a/packages/docusaurus-theme-classic/src/index.js b/packages/docusaurus-theme-classic/src/index.js
index ba2eaed5e5dc..0f09eab68218 100644
--- a/packages/docusaurus-theme-classic/src/index.js
+++ b/packages/docusaurus-theme-classic/src/index.js
@@ -12,7 +12,7 @@ const path = require('path');
 const storageKey = 'theme';
 const noFlash = `(function() {
   function setDataThemeAttribute(theme) {
-    document.querySelector('html').setAttribute('data-theme', theme);
+    document.documentElement.setAttribute('data-theme', theme);
   }
 
   function getPreferredTheme() {
diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js b/packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js
index 7fef421cc201..e2c4350ced1f 100644
--- a/packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js
+++ b/packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js
@@ -9,12 +9,12 @@ import * as React from 'react';
 const useTheme = () => {
   const [theme, setTheme] = React.useState(
     typeof document !== 'undefined'
-      ? document.querySelector('html').getAttribute('data-theme')
+      ? document.documentElement.getAttribute('data-theme')
       : '',
   );
 
   React.useEffect(() => {
-    document.querySelector('html').setAttribute('data-theme', theme);
+    document.documentElement.setAttribute('data-theme', theme);
   }, [theme]);
 
   React.useEffect(() => {