ClipFusion-org/clipfusion
1
1
Fork 0
mirror of https://github.com/ClipFusion-org/clipfusion.git synced 2025-08-03 16:55:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

trying to fix theme-color again

Browse Source
This commit is contained in:
corgifist 2025-07-25 19:44:55 +03:00
parent 04f2ed36bc
commit 6ea68e3b38
2 changed files with 15 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/layout.tsx
View File

@ -28,12 +28,7 @@ export const metadata: Metadata = {
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
viewportFit: 'cover',
themeColor: [
{ color: 'var(--background)', media: '(prefers-color-scheme: light)' },
{ color: 'var(--background)', media: '(prefers-color-scheme: dark)' },
],
viewportFit: 'cover'
};
export default async function RootLayout({

29
src/app/theme-provider.tsx
View File

@ -1,5 +1,5 @@
"use client";
import { ThemeProvider as NextThemeProvider } from "next-themes";
import { ThemeProvider as NextThemeProvider, useTheme } from "next-themes";
import { ComponentProps, ReactNode, useEffect } from "react";
const MetaThemeProvider = ({
@ -7,29 +7,28 @@ const MetaThemeProvider = ({
}: {
children: ReactNode
}) => {
const { resolvedTheme } = useTheme();
useEffect(() => {
const updateThemeColor = () => {
const bgColor = window.getComputedStyle(document.body).backgroundColor;
const metaThemeColor = document.querySelector("meta[name=theme-color]");
metaThemeColor?.setAttribute("content", bgColor);
};
let themeColorMeta = document.querySelector(
'meta[name="theme-color"]',
) as HTMLMetaElement;
const observer = new MutationObserver(updateThemeColor);
if (!themeColorMeta) {
themeColorMeta = document.createElement('meta');
themeColorMeta.name = 'theme-color';
document.head.appendChild(themeColorMeta);
}
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
return () => observer.disconnect();
}, []);
themeColorMeta.content = resolvedTheme === 'dark' ? '#171717' : '#fff';
}, [resolvedTheme]);
return children;
}
const ThemeProvider = (props: ComponentProps<typeof NextThemeProvider>): ReactNode => {
return (
<NextThemeProvider {...props} attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
<NextThemeProvider {...props} attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
<MetaThemeProvider>
{props.children}
</MetaThemeProvider>