ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix android browsers background-color issues by setting theme-color meta (#1063)

Browse Source
This commit is contained in:
Zhou Yeheng
2026-02-13 07:57:38 +08:00
committed by GitHub
parent 1007533349
commit afd4761998
2 changed files with 22 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@@ -51,6 +51,16 @@
if (backgroundColor) { if (backgroundColor) {
document.documentElement.style.backgroundColor = 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> </script>
<!-- <!--

13
src/features/theme/AppThemeContext.tsx
View File

@@ -131,8 +131,19 @@ export const AppThemeContextProvider = ({ children }: { children: ReactNode }) =
useEffect(() => { useEffect(() => {
// The set background color is not necessary anymore, since the theme has been loaded // The set background color is not necessary anymore, since the theme has been loaded
document.documentElement.style.backgroundColor = ''; 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]); }, [theme.palette.background.default]);
if (directionRef.current !== currentDirection) { if (directionRef.current !== currentDirection) {