From 66b474c5de7e8ff1c5e66253d582c8fe6b9cfa75 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Mon, 2 Dec 2024 23:12:55 +0800
Subject: [PATCH] fix: pwa color

---
 index.html                       | 10 ++++++++++
 src/components/ThemeProvider.tsx |  8 ++++++++
 vite.config.ts                   |  2 +-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 3828d8b..f122d23 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
       name="apple-mobile-web-app-status-bar-style"
       content="black-translucent"
     />
+    <meta name="theme-color" content="#242424" />
     <title>NEZHA</title>
     <script>
       (function () {
@@ -17,14 +18,23 @@
         const theme = localStorage.getItem(storageKey) || "system";
         const root = document.documentElement;
 
+        function updateThemeColor(isDark) {
+          const themeColor = isDark ? "#242424" : "#fafafa";
+          document
+            .querySelector('meta[name="theme-color"]')
+            .setAttribute("content", themeColor);
+        }
+
         if (theme === "system") {
           const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
             .matches
             ? "dark"
             : "light";
           root.classList.add(systemTheme);
+          updateThemeColor(systemTheme === "dark");
         } else {
           root.classList.add(theme);
+          updateThemeColor(theme === "dark");
         }
       })();
     </script>
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
index 9e6cc0e..9beaffa 100644
--- a/src/components/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@@ -40,10 +40,18 @@ export function ThemeProvider({
         : "light";
 
       root.classList.add(systemTheme);
+      const themeColor = systemTheme === "dark" ? "#242424" : "#fafafa";
+      document
+        .querySelector('meta[name="theme-color"]')
+        ?.setAttribute("content", themeColor);
       return;
     }
 
     root.classList.add(theme);
+    const themeColor = theme === "dark" ? "#242424" : "#fafafa";
+    document
+      .querySelector('meta[name="theme-color"]')
+      ?.setAttribute("content", themeColor);
   }, [theme]);
 
   const value = {
diff --git a/vite.config.ts b/vite.config.ts
index cbbfea0..c487293 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -15,7 +15,7 @@ export default defineConfig({
         name: "哪吒面板",
         short_name: "哪吒",
         description: "哪吒监控面板",
-        theme_color: "#ffffff",
+        theme_color: "#242424",
         icons: [
           {
             src: "pwa-192x192.png",