pref: pwa

Author: ourongxing

Diff for: astro.config.mjs

@@ -53,7 +53,6 @@ export default defineConfig({
         lang: "zh-cn",
         short_name: "ChatGPT",
         background_color: "#f6f8fa",
-        theme_color: "#f6f8fa",
         icons: [
           {
             src: "192.png",

Diff for: public/1024.png

@@ -38,6 +38,9 @@
 
   function listener() {
     document.documentElement.classList.toggle("dark", darkSchema?.matches)
+    document
+      .querySelector('meta[name="theme-color"]')
+      .setAttribute("content", darkSchema?.matches ? "#16161a" : "#f6f8fa")
   }
 
   if (persistentTheme) {
@@ -55,6 +58,9 @@
     element.classList.toggle("dark")
 
     const isDark = element.classList.contains("dark")
+    document
+      .querySelector('meta[name="theme-color"]')
+      .setAttribute("content", isDark ? "#16161a" : "#f6f8fa")
     darkSchema.removeEventListener("change", listener)
     localStorage.setItem("theme", isDark ? "dark" : "light")
   }

Diff for: public/192.png

@@ -19,6 +19,7 @@ const { title } = Astro.props
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="192x192" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
+    <meta name="theme-color" content="#f6f8fa">
     <script src="/src/pwa.ts"></script>
     {pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
   </head>