38 lines
1018 B
JavaScript
38 lines
1018 B
JavaScript
'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;
|
||
}
|