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 get theme-color switching correctly

Browse Source
This commit is contained in:
corgifist 2025-07-25 19:39:24 +03:00
parent 3f1df57cca
commit 04f2ed36bc
3 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/layout.tsx
View File

@ -29,7 +29,11 @@ export const viewport: Viewport = {
width: 'device-width', width: 'device-width',
initialScale: 1, initialScale: 1,
maximumScale: 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({
@ -40,7 +44,6 @@ export default async function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<head> <head>
<meta name="theme-color" content="var(--background)" />
<PWAHead/> <PWAHead/>
<Analytics/> <Analytics/>
</head> </head>

1
src/app/pwa-head.tsx
View File

@ -4,6 +4,7 @@ const PWAHead = () => (
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="theme-color" content="var(--background)" />
<link rel="apple-touch-startup-image" href="/splashes/apple-splash-dark-2048-2732.jpg" media="(prefers-color-scheme: dark) and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" /> <link rel="apple-touch-startup-image" href="/splashes/apple-splash-dark-2048-2732.jpg" media="(prefers-color-scheme: dark) and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />
<link rel="apple-touch-startup-image" href="/splashes/apple-splash-dark-2732-2048.jpg" media="(prefers-color-scheme: dark) and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" /> <link rel="apple-touch-startup-image" href="/splashes/apple-splash-dark-2732-2048.jpg" media="(prefers-color-scheme: dark) and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
<link rel="apple-touch-startup-image" href="/splashes/apple-splash-dark-1668-2388.jpg" media="(prefers-color-scheme: dark) and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" /> <link rel="apple-touch-startup-image" href="/splashes/apple-splash-dark-1668-2388.jpg" media="(prefers-color-scheme: dark) and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" />

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

@ -2,7 +2,11 @@
import { ThemeProvider as NextThemeProvider } from "next-themes"; import { ThemeProvider as NextThemeProvider } from "next-themes";
import { ComponentProps, ReactNode, useEffect } from "react"; import { ComponentProps, ReactNode, useEffect } from "react";
const useMetaTheme = () => { const MetaThemeProvider = ({
children
}: {
children: ReactNode
}) => {
useEffect(() => { useEffect(() => {
const updateThemeColor = () => { const updateThemeColor = () => {
const bgColor = window.getComputedStyle(document.body).backgroundColor; const bgColor = window.getComputedStyle(document.body).backgroundColor;
@ -19,13 +23,16 @@ const useMetaTheme = () => {
return () => observer.disconnect(); return () => observer.disconnect();
}, []); }, []);
};
return children;
}
const ThemeProvider = (props: ComponentProps<typeof NextThemeProvider>): ReactNode => { const ThemeProvider = (props: ComponentProps<typeof NextThemeProvider>): ReactNode => {
useMetaTheme();
return ( return (
<NextThemeProvider {...props} attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange> <NextThemeProvider {...props} attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
{props.children} <MetaThemeProvider>
{props.children}
</MetaThemeProvider>
</NextThemeProvider> </NextThemeProvider>
) )
}; };