feat:新增安卓 pwa 支持

This commit is contained in:
hzm
2026-03-10 07:34:04 +08:00
parent 3530a8eeb2
commit be91fad303
4 changed files with 100 additions and 0 deletions

View File

@@ -0,0 +1,37 @@
'use client';
import { useEffect } from 'react';
const THEME_COLORS = {
dark: '#0f172a',
light: '#ffffff',
};
function getThemeColor() {
if (typeof document === 'undefined') return THEME_COLORS.dark;
const theme = document.documentElement.getAttribute('data-theme');
return THEME_COLORS[theme] ?? THEME_COLORS.dark;
}
function applyThemeColor() {
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) meta.setAttribute('content', getThemeColor());
}
/**
* 根据当前亮/暗主题同步 PWA theme-color meta使 Android 状态栏与页面主题一致。
* 监听 document.documentElement 的 data-theme 变化并更新 meta。
*/
export default function ThemeColorSync() {
useEffect(() => {
applyThemeColor();
const observer = new MutationObserver(() => applyThemeColor());
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['data-theme'],
});
return () => observer.disconnect();
}, []);
return null;
}