angel/mice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement dynamic viewport theme color management and update meta tag

Browse Source
This commit is contained in:
angel
2025-06-20 03:18:18 +00:00
committed by GitHub
parent e4b239e230
commit 8650c3b438
4 changed files with 79 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/DynamicViewportTheme.tsx Normal file
View File

@@ -0,0 +1,8 @@
'use client';
import { useViewportThemeColor } from '@/hooks/use-viewport-theme-color';
export default function DynamicViewportTheme() {
useViewportThemeColor();
return null;
}

18
app/layout.tsx
View File

@@ -7,12 +7,8 @@ import { NavidromeConfigProvider } from "./components/NavidromeConfigContext";
import { ThemeProvider } from "./components/ThemeProvider";
import { PostHogProvider } from "./components/PostHogProvider";
import { Metadata } from "next";
import type { Viewport } from 'next';
import Ihateserverside from './components/ihateserverside';
export const viewport: Viewport = {
themeColor: 'black',
};
import DynamicViewportTheme from './components/DynamicViewportTheme';
export const metadata: Metadata = {
title: {
@@ -70,6 +66,17 @@ export default function Layout({ children }: LayoutProps) {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
// Set initial theme color based on theme
const themeColors = {
blue: '#0f0f23',
violet: '#0c0a2e'
};
const metaThemeColor = document.createElement('meta');
metaThemeColor.name = 'theme-color';
metaThemeColor.content = themeColors[theme];
document.head.appendChild(metaThemeColor);
})();
`,
}}
@@ -78,6 +85,7 @@ export default function Layout({ children }: LayoutProps) {
<body className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background`}>
<PostHogProvider>
<ThemeProvider>
<DynamicViewportTheme />
<NavidromeConfigProvider>
<NavidromeProvider>
<AudioPlayerProvider>