fix: sync PWA status bar theme-color with app color scheme (#28006)
This commit is contained in:
@@ -10,7 +10,6 @@
|
|||||||
<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="#F8F7F7" />
|
||||||
<meta name="theme-color" content="#131010" media="(prefers-color-scheme: dark)" />
|
|
||||||
<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>
|
||||||
|
|||||||
@@ -16,6 +16,10 @@
|
|||||||
document.documentElement.dataset.theme = themeId
|
document.documentElement.dataset.theme = themeId
|
||||||
document.documentElement.dataset.colorScheme = mode
|
document.documentElement.dataset.colorScheme = mode
|
||||||
|
|
||||||
|
// 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 (themeId === "oc-2") return
|
if (themeId === "oc-2") return
|
||||||
|
|
||||||
var css = localStorage.getItem("opencode-theme-css-" + mode)
|
var css = localStorage.getItem("opencode-theme-css-" + mode)
|
||||||
|
|||||||
@@ -9,7 +9,6 @@
|
|||||||
<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" />
|
||||||
<meta name="theme-color" content="#F8F7F7" />
|
<meta name="theme-color" content="#F8F7F7" />
|
||||||
<meta name="theme-color" content="#131010" media="(prefers-color-scheme: dark)" />
|
|
||||||
<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>
|
||||||
|
|||||||
@@ -9,7 +9,6 @@
|
|||||||
<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" />
|
||||||
<meta name="theme-color" content="#F8F7F7" />
|
<meta name="theme-color" content="#F8F7F7" />
|
||||||
<meta name="theme-color" content="#131010" media="(prefers-color-scheme: dark)" />
|
|
||||||
<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>
|
||||||
|
|||||||
@@ -25,7 +25,6 @@ export default createHandler(() => (
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>OpenCode</title>
|
<title>OpenCode</title>
|
||||||
<meta name="theme-color" content="#F8F7F7" />
|
<meta name="theme-color" content="#F8F7F7" />
|
||||||
<meta name="theme-color" content="#131010" media="(prefers-color-scheme: dark)" />
|
|
||||||
{assets}
|
{assets}
|
||||||
</head>
|
</head>
|
||||||
<body class="antialiased overscroll-none text-12-regular">
|
<body class="antialiased overscroll-none text-12-regular">
|
||||||
|
|||||||
@@ -147,6 +147,10 @@ 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
|
||||||
|
|
||||||
|
// 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")
|
||||||
}
|
}
|
||||||
|
|
||||||
function cacheThemeVariants(theme: DesktopTheme, themeId: string) {
|
function cacheThemeVariants(theme: DesktopTheme, themeId: string) {
|
||||||
|
|||||||
Reference in New Issue
Block a user