Merge pull request #1450 from yorunning/fix-1

fix: the theme-color selector
This commit is contained in:
Yifei Zhang 2023-05-13 14:50:54 +08:00 committed by GitHub
commit 1a626a68f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 15 deletions

View File

@ -64,17 +64,17 @@ export function useSwitchTheme() {
} }
const metaDescriptionDark = document.querySelector( const metaDescriptionDark = document.querySelector(
'meta[name="theme-color"][media]', 'meta[name="theme-color"][media*="dark"]',
); );
const metaDescriptionLight = document.querySelector( const metaDescriptionLight = document.querySelector(
'meta[name="theme-color"]:not([media])', 'meta[name="theme-color"][media*="light"]',
); );
if (config.theme === "auto") { if (config.theme === "auto") {
metaDescriptionDark?.setAttribute("content", "#151515"); metaDescriptionDark?.setAttribute("content", "#151515");
metaDescriptionLight?.setAttribute("content", "#fafafa"); metaDescriptionLight?.setAttribute("content", "#fafafa");
} else { } else {
const themeColor = getCSSVar("--themeColor"); const themeColor = getCSSVar("--theme-color");
metaDescriptionDark?.setAttribute("content", themeColor); metaDescriptionDark?.setAttribute("content", themeColor);
metaDescriptionLight?.setAttribute("content", themeColor); metaDescriptionLight?.setAttribute("content", themeColor);
} }

View File

@ -9,11 +9,19 @@ const buildConfig = getBuildConfig();
export const metadata = { export const metadata = {
title: "ChatGPT Next Web", title: "ChatGPT Next Web",
description: "Your personal ChatGPT Chat Bot.", description: "Your personal ChatGPT Chat Bot.",
viewport: {
width: "device-width",
initialScale: 1,
maximumScale: 1,
},
themeColor: [
{ media: "(prefers-color-scheme: light)", color: "#fafafa" },
{ media: "(prefers-color-scheme: dark)", color: "#151515" },
],
appleWebApp: { appleWebApp: {
title: "ChatGPT Next Web", title: "ChatGPT Next Web",
statusBarStyle: "default", statusBarStyle: "default",
}, },
viewport: "width=device-width, initial-scale=1, maximum-scale=1",
}; };
export default function RootLayout({ export default function RootLayout({
@ -24,22 +32,12 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<head> <head>
<meta
name="theme-color"
content="#fafafa"
media="(prefers-color-scheme: light)"
/>
<meta
name="theme-color"
content="#151515"
media="(prefers-color-scheme: dark)"
/>
<meta name="version" content={buildConfig.commitId} /> <meta name="version" content={buildConfig.commitId} />
<link rel="manifest" href="/site.webmanifest"></link> <link rel="manifest" href="/site.webmanifest"></link>
<link rel="preconnect" href="https://fonts.proxy.ustclug.org"></link> <link rel="preconnect" href="https://fonts.proxy.ustclug.org"></link>
<link <link
href="https://fonts.proxy.ustclug.org/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap"
rel="stylesheet" rel="stylesheet"
href="https://fonts.proxy.ustclug.org/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap"
></link> ></link>
<script src="/serviceWorkerRegister.js" defer></script> <script src="/serviceWorkerRegister.js" defer></script>
</head> </head>