From 77709ab7c01a76a232842129724a60c94d0dc50f Mon Sep 17 00:00:00 2001 From: resomi <43309341+resomi@users.noreply.github.com> Date: Tue, 10 Jun 2025 09:43:11 +0800 Subject: [PATCH] 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 --- public/toggle-theme.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/public/toggle-theme.js b/public/toggle-theme.js index 146af33..cfc960e 100644 --- a/public/toggle-theme.js +++ b/public/toggle-theme.js @@ -67,6 +67,18 @@ window.onload = () => { document.addEventListener("astro:after-swap", setThemeFeature); }; +// Set theme-color value before page transition +// to avoid navigation bar color flickering in Android dark mode +document.addEventListener("astro:before-swap", event => { + const bgColor = document + .querySelector("meta[name='theme-color']") + ?.getAttribute("content"); + + event.newDocument + .querySelector("meta[name='theme-color']") + ?.setAttribute("content", bgColor); +}); + // sync with system changes window .matchMedia("(prefers-color-scheme: dark)")