diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 443fb58..ff26ec9 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -29,7 +29,11 @@ export const viewport: Viewport = {
width: 'device-width',
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({
@@ -40,7 +44,6 @@ export default async function RootLayout({
return (
-
diff --git a/src/app/pwa-head.tsx b/src/app/pwa-head.tsx
index 65dbba9..eae2de5 100644
--- a/src/app/pwa-head.tsx
+++ b/src/app/pwa-head.tsx
@@ -4,6 +4,7 @@ const PWAHead = () => (
+
diff --git a/src/app/theme-provider.tsx b/src/app/theme-provider.tsx
index 48c3414..71b4456 100644
--- a/src/app/theme-provider.tsx
+++ b/src/app/theme-provider.tsx
@@ -2,7 +2,11 @@
import { ThemeProvider as NextThemeProvider } from "next-themes";
import { ComponentProps, ReactNode, useEffect } from "react";
-const useMetaTheme = () => {
+const MetaThemeProvider = ({
+ children
+}: {
+ children: ReactNode
+}) => {
useEffect(() => {
const updateThemeColor = () => {
const bgColor = window.getComputedStyle(document.body).backgroundColor;
@@ -19,13 +23,16 @@ const useMetaTheme = () => {
return () => observer.disconnect();
}, []);
-};
+
+ return children;
+}
const ThemeProvider = (props: ComponentProps): ReactNode => {
- useMetaTheme();
return (
- {props.children}
+
+ {props.children}
+
)
};