doc: remove flicker on page load on dark theme

Theme applying logic get loaded and executed in async mode, so often there is a delay in applying the proper theme to a page which leads to flicker on dark theme. Resolved by moving critical logic to the page head PR-URL: nodejs#50942 Reviewed-By: Moshe Atlow <[email protected]> Reviewed-By: Claudio Wunder <[email protected]>
RafaelGSS · Nov 27, 2023 · d42949e · d42949e
1 parent 900d79c
commit d42949e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/doc/api_assets/api.js b/doc/api_assets/api.js
@@ -24,12 +24,6 @@
           );
         }
       }
-
-      if (mq.matches) {
-        document.documentElement.classList.add('dark-mode');
-      }
-    } else if (storedTheme === 'dark') {
-      document.documentElement.classList.add('dark-mode');
     }
 
     if (themeToggleButton) {

diff --git a/doc/template.html b/doc/template.html
@@ -10,6 +10,19 @@
   <link rel="stylesheet" href="assets/hljs.css">
   <link rel="canonical" href="https://nodejs.org/api/__FILENAME__.html">
   <script async defer src="assets/api.js" type="text/javascript"></script>
+  <script>
+      const storedTheme = localStorage.getItem('theme');
+
+      // Follow operating system theme preference
+      if (storedTheme === null && window.matchMedia) {
+        const mq = window.matchMedia('(prefers-color-scheme: dark)');
+        if (mq.matches) {
+          document.documentElement.classList.add('dark-mode');
+        }
+      } else if (storedTheme === 'dark') {
+        document.documentElement.classList.add('dark-mode');
+      }
+  </script>
   __JS_FLAVORED_DYNAMIC_CSS__
 </head>
 <body class="alt apidoc" id="api-section-__FILENAME__">