fix(app): improve iOS PWA shell (#32798)

This commit is contained in:
Brendan Allan 2026-06-23 17:59:30 +08:00 committed by GitHub
parent fc95a84b42
commit a21e74773f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 16 additions and 8 deletions

View File

@ -1,5 +1,5 @@
<!doctype html>
<html lang="en" style="background-color: var(--background-base)">
<html lang="en" style="background-color: var(--v2-background-bg-deep, #fafafa)">
<head>
<meta charset="utf-8" />
<meta
@ -12,14 +12,17 @@
<link rel="shortcut icon" href="/favicon-v3.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-v3.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#F8F7F7" />
<meta name="theme-color" content="#fafafa" />
<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="black-translucent" />
<meta property="og:image" content="/social-share.png" />
<meta property="twitter:image" content="/social-share.png" />
<script id="oc-theme-preload-script" src="/oc-theme-preload.js"></script>
</head>
<body class="antialiased overscroll-none text-12-regular overflow-hidden">
<body class="antialiased overscroll-none text-12-regular overflow-hidden bg-v2-background-bg-deep">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" class="flex flex-col h-dvh p-px"></div>
<div id="root" class="flex flex-col h-dvh bg-v2-background-bg-deep p-px"></div>
<script src="/src/entry.tsx" type="module"></script>
</body>
</html>

View File

@ -15,10 +15,11 @@
document.documentElement.dataset.theme = themeId
document.documentElement.dataset.colorScheme = mode
document.documentElement.style.backgroundColor = isDark ? "#080808" : "#fafafa"
// Update theme-color meta tag to match app color scheme
var metas = document.querySelectorAll("meta[name='theme-color']")
if (metas.length > 0) metas[0].setAttribute("content", isDark ? "#131010" : "#F8F7F7")
if (metas.length > 0) metas[0].setAttribute("content", isDark ? "#080808" : "#fafafa")
if (themeId === "oc-2") return

View File

@ -1,6 +1,9 @@
{
"name": "OpenCode",
"short_name": "OpenCode",
"id": "/",
"start_url": "/",
"scope": "/",
"icons": [
{
"src": "/web-app-manifest-192x192.png",
@ -15,7 +18,7 @@
"purpose": "maskable"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"theme_color": "#080808",
"background_color": "#080808",
"display": "standalone"
}

View File

@ -152,10 +152,11 @@ function applyThemeCss(theme: DesktopTheme, themeId: string, mode: "light" | "da
ensureThemeStyleElement().textContent = fullCss
document.documentElement.dataset.theme = themeId
document.documentElement.dataset.colorScheme = mode
document.documentElement.style.backgroundColor = isDark ? "#080808" : "#fafafa"
// Update theme-color meta tag to match light/dark mode
const meta = document.querySelector('meta[name="theme-color"]')
if (meta) meta.setAttribute("content", isDark ? "#131010" : "#F8F7F7")
if (meta) meta.setAttribute("content", isDark ? "#080808" : "#fafafa")
}
function cacheThemeVariants(theme: DesktopTheme, themeId: string) {