doc: improve scrollbar appearance in dark mode

PR-URL: #41890
Reviewed-By: Antoine du Hamel <[email protected]>
Reviewed-By: Tobias Nießen <[email protected]>
Reviewed-By: Mestery <[email protected]>
Reviewed-By: Luigi Pinca <[email protected]>

Author: Aaron Xie

doc/api_assets/style.css

@@ -772,6 +772,10 @@ kbd {
   display: none;
 }
 
+.dark-mode {
+  color-scheme: dark;
+}
+
 .dark-mode .dark-icon {
   display: none;
 }

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')
           );
         });
       }