enhance: polish PWA manifest and meta tags (#5695)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

web/index.html

@@ -9,6 +9,10 @@
     <link rel="icon" type="image/webp" href="/logo.webp" />
     <link rel="manifest" href="/site.webmanifest" />
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+    <meta name="theme-color" content="#faf9f5" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
     <!-- memos.metadata.head -->
     <title>Memos</title>
   </head>

web/public/site.webmanifest

 {
   "name": "Memos",
   "short_name": "Memos",
+  "description": "An open-source, self-hosted note-taking tool. Capture thoughts instantly. Own them completely.",
   "icons": [
     { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
     { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
   ],
   "display": "standalone",
-  "start_url": "/"
+  "scope": "/",
+  "start_url": "/",
+  "theme_color": "#faf9f5",
+  "background_color": "#faf9f5"
 }

web/src/utils/theme.ts

@@ -24,6 +24,12 @@ const THEME_CONTENT: Record<ResolvedTheme, string | null> = {
   paper: paperThemeContent,
 };
 
+const THEME_COLORS: Record<ResolvedTheme, string> = {
+  default: "#faf9f5",
+  "default-dark": "#020204",
+  paper: "#f5ede4",
+};
+
 export const THEME_OPTIONS: ThemeOption[] = [
   { value: "system", label: "Sync with system" },
   { value: "default", label: "Light" },
@@ -165,6 +171,17 @@ const setThemeAttribute = (theme: ResolvedTheme): void => {
   document.documentElement.setAttribute("data-theme", theme);
 };
 
+/**
+ * Updates the theme-color meta tag to match the current theme background.
+ * This colors the browser/status bar on mobile devices.
+ */
+const updateThemeColorMeta = (theme: ResolvedTheme): void => {
+  const meta = document.querySelector<HTMLMetaElement>('meta[name="theme-color"]');
+  if (meta) {
+    meta.content = THEME_COLORS[theme];
+  }
+};
+
 // ============================================================================
 // Main Theme Loading
 // ============================================================================
@@ -184,6 +201,7 @@ export const loadTheme = (themeName: string): void => {
 
   injectThemeStyle(resolvedTheme);
   setThemeAttribute(resolvedTheme);
+  updateThemeColorMeta(resolvedTheme);
   setStoredTheme(validTheme); // Store original theme preference (not resolved)
 };