style: bootstrap the premium v2 theme

This commit is contained in:
afterhours247
2026-07-22 05:24:51 +08:00
parent 2b8705902a
commit 0f9bb69b18
+25 -9
View File
@@ -1,10 +1,26 @@
import type { Metadata, Viewport } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import './v2.css'
import { Providers } from './providers'
import Script from 'next/script'
const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
const inter = Inter({ subsets: ['latin'], variable: '--font-inter', display: 'swap' })
const themeBootstrap = `
(function () {
try {
var preference = localStorage.getItem('theme') || 'system';
var dark = preference === 'dark' || (preference === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
var root = document.documentElement;
root.classList.remove('light', 'dark');
root.classList.add(dark ? 'dark' : 'light');
root.style.colorScheme = dark ? 'dark' : 'light';
} catch (_) {
document.documentElement.classList.add('dark');
document.documentElement.style.colorScheme = 'dark';
}
})();`
export const metadata: Metadata = {
title: {
@@ -46,10 +62,10 @@ export const metadata: Metadata = {
export const viewport: Viewport = {
themeColor: [
{ media: '(prefers-color-scheme: light)', color: '#ffffff' },
{ media: '(prefers-color-scheme: dark)', color: '#0a0e14' },
{ media: '(prefers-color-scheme: light)', color: '#f8fafc' },
{ media: '(prefers-color-scheme: dark)', color: '#090d16' },
],
colorScheme: 'dark',
colorScheme: 'dark light',
width: 'device-width',
initialScale: 1,
maximumScale: 5,
@@ -61,16 +77,16 @@ export default function RootLayout({
return (
<html lang="en" suppressHydrationWarning>
<head>
<script dangerouslySetInnerHTML={{ __html: themeBootstrap }} />
<link rel="icon" href="/favicon16x16.ico" sizes="16x16" type="image/x-icon" />
<link rel="icon" href="/icon-192.png" sizes="192x192" type="image/png" />
<link rel="icon" href="/icon-512.png" sizes="512x512" type="image/png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#10b981" media="(prefers-color-scheme: dark)" />
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#090d16" media="(prefers-color-scheme: dark)" />
<meta name="theme-color" content="#f8fafc" media="(prefers-color-scheme: light)" />
</head>
<body className={`${inter.variable} font-sans antialiased min-h-screen bg-background`}>
<body className={`${inter.variable} min-h-screen bg-background font-sans antialiased`}>
<Providers>{children}</Providers>
<Script id="sw-registration" strategy="lazyOnload">
{`if ('serviceWorker' in navigator) {
@@ -82,4 +98,4 @@ export default function RootLayout({
</body>
</html>
)
}
}