From 6fc0a25b64f15f31083fe706f04bd6699805074b Mon Sep 17 00:00:00 2001
From: Aaron Xie <xieqiang9408@gmail.com>
Date: Fri, 11 Feb 2022 19:58:18 +0800
Subject: [PATCH] doc: improve scrollbar appearance in dark mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PR-URL: https://github.com/nodejs/node/pull/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>
---
 doc/api_assets/style.css | 4 ++++
 doc/template.html        | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

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