OSSForks/node
1
0
Fork 0
mirror of https://github.com/zebrajr/node.git synced 2026-01-15 12:15:26 +00:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

doc: remove flicker on page load on dark theme

Browse Source 
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: https://github.com/nodejs/node/pull/50942
Reviewed-By: Moshe Atlow <moshe@atlow.co.il>
Reviewed-By: Claudio Wunder <cwunder@gnome.org>
This commit is contained in:
Dima Demakov
2023-11-27 16:57:21 +01:00
committed by GitHub
parent 900d79caf2
commit d42949e79f
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
doc/api_assets/api.js
View File

@@ -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) {

13
doc/template.html
View File

@@ -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__">