ClipFusion-org/clipfusion
1
1
Fork 0
mirror of https://github.com/ClipFusion-org/clipfusion.git synced 2025-08-05 18:15: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 = { export const viewport: Viewport = {
width: 'device-width', width: 'device-width',
initialScale: 1, initialScale: 1,
maximumScale: 1, viewportFit: 'cover'
viewportFit: 'cover',
themeColor: [
{ color: 'var(--background)', media: '(prefers-color-scheme: light)' },
{ color: 'var(--background)', media: '(prefers-color-scheme: dark)' },
],
}; };
export default async function RootLayout({ export default async function RootLayout({

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

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