Skip to content

Commit 77709ab

Browse files
resomisatnaing
andauthored
fix: navigation flicker on Android when in dark mode (#494)
Set meta theme-color value before page transition to avoid navigation bar color flickering in Android dark mode. --------- Co-authored-by: satnaing <[email protected]>
1 parent 0cc647c commit 77709ab

File tree

1 file changed

+12
-0
lines changed

1 file changed

+12
-0
lines changed

public/toggle-theme.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,18 @@ window.onload = () => {
6767
document.addEventListener("astro:after-swap", setThemeFeature);
6868
};
6969

70+
// Set theme-color value before page transition
71+
// to avoid navigation bar color flickering in Android dark mode
72+
document.addEventListener("astro:before-swap", event => {
73+
const bgColor = document
74+
.querySelector("meta[name='theme-color']")
75+
?.getAttribute("content");
76+
77+
event.newDocument
78+
.querySelector("meta[name='theme-color']")
79+
?.setAttribute("content", bgColor);
80+
});
81+
7082
// sync with system changes
7183
window
7284
.matchMedia("(prefers-color-scheme: dark)")

0 commit comments

Comments
 (0)