happyz
/
memos
mirror of https://github.com/usememos/memos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

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

6
web/public/site.webmanifest
View File

@ -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"
}

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

@ -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)
};