ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(app): improve iOS PWA shell

Browse source
This commit is contained in:
Brendan Allan 2026-06-18 09:47:53 +02:00
commit 27371cfb2b
No known key found for this signature in database
GPG key ID: 41E835AEA046A32E
4 changed files with 17 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

11
packages/app/index.html
View file

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en" style="background-color: var(--background-base)"> <html lang="en" style="background-color: var(--v2-background-bg-deep, #fafafa)">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta <meta
@ -12,14 +12,17 @@
<link rel="shortcut icon" href="/favicon-v3.ico" /> <link rel="shortcut icon" href="/favicon-v3.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-v3.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-v3.png" />
<link rel="manifest" href="/site.webmanifest" /> <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="og:image" content="/social-share.png" />
<meta property="twitter: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> <script id="oc-theme-preload-script" src="/oc-theme-preload.js"></script>
</head> </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> <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> <script src="/src/entry.tsx" type="module"></script>
</body> </body>
</html> </html>

3
packages/app/public/oc-theme-preload.js
View file

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

9
packages/ui/src/assets/favicon/site.webmanifest
View file

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

3
packages/ui/src/theme/context.tsx
View file

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