doc: improve scrollbar appearance in dark mode

PR-URL: nodejs#41890 Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com> Reviewed-By: Tobias Nießen <tniessen@tnie.de> Reviewed-By: Mestery <mestery@protonmail.com> Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
danielleadams · Apr 21, 2022 · ec6fd4a · ec6fd4a
1 parent e744dcf
commit ec6fd4a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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')
           );
         });
       }