diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
index 90db2f4bd8a66b..8b209ec0b59c6e 100644
--- a/doc/api_assets/style.css
+++ b/doc/api_assets/style.css
@@ -772,6 +772,10 @@ kbd {
   display: none;
 }
 
+.dark-mode {
+  color-scheme: dark;
+}
+
 .dark-mode .dark-icon {
   display: none;
 }
diff --git a/doc/template.html b/doc/template.html
index 5e70b6054e080b..c8c78dce59b64a 100644
--- a/doc/template.html
+++ b/doc/template.html
@@ -73,7 +73,7 @@ <h1>Node.js __VERSION__ documentation</h1>
         const mq = window.matchMedia('(prefers-color-scheme: dark)');
         if ('onchange' in mq) {
           function mqChangeListener(e) {
-            document.body.classList.toggle('dark-mode', e.matches);
+            document.documentElement.classList.toggle('dark-mode', e.matches);
           }
           mq.addEventListener('change', mqChangeListener);
           if (themeToggleButton) {
@@ -83,17 +83,17 @@ <h1>Node.js __VERSION__ documentation</h1>
           }
         }
         if (mq.matches) {
-          document.body.classList.add('dark-mode');
+          document.documentElement.classList.add('dark-mode');
         }
       } else if (userSettings === 'true') {
-        document.body.classList.add('dark-mode');
+        document.documentElement.classList.add('dark-mode');
       }
       if (themeToggleButton) {
         themeToggleButton.hidden = false;
         themeToggleButton.addEventListener('click', function() {
           sessionStorage.setItem(
             kCustomPreference,
-            document.body.classList.toggle('dark-mode')
+            document.documentElement.classList.toggle('dark-mode')
           );
         });
       }