system/memos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

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

Browse source 
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
memoclaw 2026-03-07 14:02:13 +08:00 committed by GitHub
parent cd5816c428
commit e70149af5f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 27 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/index.html
View file

@ -9,6 +9,10 @@
<link rel="icon" type="image/webp" href="/logo.webp" /> <link rel="icon" type="image/webp" href="/logo.webp" />
<link rel="manifest" href="/site.webmanifest" /> <link rel="manifest" href="/site.webmanifest" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <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 --> <!-- memos.metadata.head -->
<title>Memos</title> <title>Memos</title>
</head> </head>

6
web/public/site.webmanifest
View file

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

18
web/src/utils/theme.ts
View file

@ -24,6 +24,12 @@ const THEME_CONTENT: Record<ResolvedTheme, string | null> = {
paper: paperThemeContent, paper: paperThemeContent,
}; };
const THEME_COLORS: Record<ResolvedTheme, string> = {
default: "#faf9f5",
"default-dark": "#020204",
paper: "#f5ede4",
};
export const THEME_OPTIONS: ThemeOption[] = [ export const THEME_OPTIONS: ThemeOption[] = [
{ value: "system", label: "Sync with system" }, { value: "system", label: "Sync with system" },
{ value: "default", label: "Light" }, { value: "default", label: "Light" },
@ -165,6 +171,17 @@ const setThemeAttribute = (theme: ResolvedTheme): void => {
document.documentElement.setAttribute("data-theme", theme); 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 // Main Theme Loading
// ============================================================================ // ============================================================================
@ -184,6 +201,7 @@ export const loadTheme = (themeName: string): void => {
injectThemeStyle(resolvedTheme); injectThemeStyle(resolvedTheme);
setThemeAttribute(resolvedTheme); setThemeAttribute(resolvedTheme);
updateThemeColorMeta(resolvedTheme);
setStoredTheme(validTheme); // Store original theme preference (not resolved) setStoredTheme(validTheme); // Store original theme preference (not resolved)
}; };