From afd47619987af5b9ddb03cf672052fd33ba14496 Mon Sep 17 00:00:00 2001
From: Zhou Yeheng <lonely_hentai@hotmail.com>
Date: Fri, 13 Feb 2026 07:57:38 +0800
Subject: [PATCH] Fix android browsers background-color issues by setting
 theme-color meta (#1063)

---
 index.html                             | 10 ++++++++++
 src/features/theme/AppThemeContext.tsx | 13 ++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 2b026954..6176e7be 100644
--- a/index.html
+++ b/index.html
@@ -51,6 +51,16 @@
 
     if (backgroundColor) {
         document.documentElement.style.backgroundColor = backgroundColor;
+        // android chromium-based browser/pwa background color (e.g. top status bar and navigation bar) will change dynamically based on meta theme-color
+        let themeColorMeta = document.querySelector('meta[name="theme-color"]');
+        if (!themeColorMeta) {
+            themeColorMeta = document.createElement('meta');
+            themeColorMeta.setAttribute('name', 'theme-color');
+            document.head.appendChild(themeColorMeta);
+        }
+        if (themeColorMeta.getAttribute('content') !== backgroundColor) {
+            themeColorMeta.setAttribute('content', backgroundColor);
+        }
     }
 </script>
 <!--
diff --git a/src/features/theme/AppThemeContext.tsx b/src/features/theme/AppThemeContext.tsx
index ec9effe7..04f55b10 100644
--- a/src/features/theme/AppThemeContext.tsx
+++ b/src/features/theme/AppThemeContext.tsx
@@ -131,8 +131,19 @@ export const AppThemeContextProvider = ({ children }: { children: ReactNode }) =
     useEffect(() => {
         // The set background color is not necessary anymore, since the theme has been loaded
         document.documentElement.style.backgroundColor = '';
+        const themeBackgroundColor = theme.palette.background.default;
 
-        AppStorage.local.setItem('theme_background', theme.palette.background.default);
+        AppStorage.local.setItem('theme_background', themeBackgroundColor);
+        // android chromium-based browser/pwa background color (e.g. top status bar and navigation bar) will change dynamically based on meta theme-color
+        let themeColorMeta = document.querySelector('meta[name="theme-color"]');
+        if (!themeColorMeta) {
+            themeColorMeta = document.createElement('meta');
+            themeColorMeta.setAttribute('name', 'theme-color');
+            document.head.appendChild(themeColorMeta);
+        }
+        if (themeColorMeta.getAttribute('content') !== themeBackgroundColor) {
+            themeColorMeta.setAttribute('content', themeBackgroundColor);
+        }
     }, [theme.palette.background.default]);
 
     if (directionRef.current !== currentDirection) {