Commit 91cce27
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: #50942
Reviewed-By: Moshe Atlow <moshe@atlow.co.il>
Reviewed-By: Claudio Wunder <cwunder@gnome.org>1 parent 522fbb0 commit 91cce27
2 files changed
Lines changed: 13 additions & 6 deletions
| 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) { | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -10,6 +10,19 @@ | |||
| 10 | 10 | <link rel="stylesheet" href="assets/hljs.css"> | |
| 11 | 11 | <link rel="canonical" href="https://nodejs.org/api/__FILENAME__.html"> | |
| 12 | 12 | <script async defer src="assets/api.js" type="text/javascript"></script> | |
| 13 | + <script> | ||
| 14 | + const storedTheme = localStorage.getItem('theme'); | ||
| 15 | + | ||
| 16 | + // Follow operating system theme preference | ||
| 17 | + if (storedTheme === null && window.matchMedia) { | ||
| 18 | + const mq = window.matchMedia('(prefers-color-scheme: dark)'); | ||
| 19 | + if (mq.matches) { | ||
| 20 | + document.documentElement.classList.add('dark-mode'); | ||
| 21 | + } | ||
| 22 | + } else if (storedTheme === 'dark') { | ||
| 23 | + document.documentElement.classList.add('dark-mode'); | ||
| 24 | + } | ||
| 25 | + </script> | ||
| 13 | 26 | __JS_FLAVORED_DYNAMIC_CSS__ | |
| 14 | 27 | </head> | |
| 15 | 28 | <body class="alt apidoc" id="api-section-__FILENAME__"> | |
0 commit comments