29 lines
753 B
TypeScript
29 lines
753 B
TypeScript
import { useTheme } from 'next-themes';
|
|
import { useEffect } from 'react';
|
|
|
|
export default function useMetaThemeColor({
|
|
colorLight,
|
|
colorDark,
|
|
}: {
|
|
colorLight?: string
|
|
colorDark?: string
|
|
}) {
|
|
const { resolvedTheme } = useTheme();
|
|
|
|
const preferredThemeColor = resolvedTheme === 'light'
|
|
? colorLight
|
|
: colorDark;
|
|
|
|
useEffect(() => {
|
|
if (preferredThemeColor) {
|
|
// Temporarily create meta tag for overlays,
|
|
// which prevents stale headers on theme changes
|
|
const meta = document.createElement('meta');
|
|
meta.name = 'theme-color';
|
|
meta.content = preferredThemeColor;
|
|
document.getElementsByTagName('head')[0]?.appendChild(meta);
|
|
return () => meta.remove();
|
|
}
|
|
}, [preferredThemeColor]);
|
|
}
|