From e70149af5fd02f8769eef5bb5a13b1e7364015dc Mon Sep 17 00:00:00 2001
From: memoclaw <usememos@gmail.com>
Date: Sat, 7 Mar 2026 14:02:13 +0800
Subject: [PATCH] enhance: polish PWA manifest and meta tags (#5695)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/index.html              |  4 ++++
 web/public/site.webmanifest |  6 +++++-
 web/src/utils/theme.ts      | 18 ++++++++++++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/web/index.html b/web/index.html
index 2f65b7630..606be5059 100644
--- a/web/index.html
+++ b/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>
diff --git a/web/public/site.webmanifest b/web/public/site.webmanifest
index 7c93a8ffa..039d56dcd 100644
--- a/web/public/site.webmanifest
+++ b/web/public/site.webmanifest
@@ -1,10 +1,14 @@
 {
   "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"
 }
diff --git a/web/src/utils/theme.ts b/web/src/utils/theme.ts
index 7d3e8cd41..156662613 100644
--- a/web/src/utils/theme.ts
+++ b/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)
 };