fix: pwa color

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>

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 = {

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",