doc: remove flicker on page load on dark theme

demakoff · aduh95 · commit 91cce27ebb1e · 2025-02-10T19:34:10.000+01:00
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: #50942 Reviewed-By: Moshe Atlow <moshe@atlow.co.il> Reviewed-By: Claudio Wunder <cwunder@gnome.org>
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__">

Original file line number	Diff line number	Diff line change
`@@ -24,12 +24,6 @@`
`24`	`24`	`);`
`25`	`25`	`}`
`26`	`26`	`}`
`27`		`-`
`28`		`- if (mq.matches) {`
`29`		`- document.documentElement.classList.add('dark-mode');`
`30`		`- }`
`31`		`- } else if (storedTheme === 'dark') {`
`32`		`- document.documentElement.classList.add('dark-mode');`
`33`	`27`	`}`
`34`	`28`
`35`	`29`	`if (themeToggleButton) {`