fix: 适配 ios safari 浏览器暗黑模式

This commit is contained in:
CH-122
2025-08-15 15:23:49 +08:00
parent c1d19b854b
commit b26891261c
2 changed files with 8 additions and 4 deletions

View File

@@ -29,10 +29,13 @@ export default defineNuxtConfig({
let themeColor = '#fff'; let themeColor = '#fff';
let themeStatus = 'default';
if (theme === 'dark') { if (theme === 'dark') {
themeColor = '#333'; themeColor = '#333';
themeStatus = 'black-translucent';
} else { } else {
themeColor = '#ffffff'; themeColor = '#ffffff';
themeStatus = 'default';
} }
const androidMeta = document.createElement('meta'); const androidMeta = document.createElement('meta');
@@ -41,8 +44,8 @@ export default defineNuxtConfig({
const iosMeta = document.createElement('meta'); const iosMeta = document.createElement('meta');
iosMeta.name = 'apple-mobile-web-app-status-bar-style'; iosMeta.name = 'apple-mobile-web-app-status-bar-style';
iosMeta.content = themeColor; iosMeta.content = themeStatus;
document.head.appendChild(androidMeta); document.head.appendChild(androidMeta);
document.head.appendChild(iosMeta); document.head.appendChild(iosMeta);
} catch (e) { } catch (e) {

View File

@@ -29,6 +29,7 @@ function apply(mode) {
const androidMeta = document.querySelector('meta[name="theme-color"]') const androidMeta = document.querySelector('meta[name="theme-color"]')
const iosMeta = document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]') const iosMeta = document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]')
const themeColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim(); const themeColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim();
const themeStatus = newMode === 'dark' ? 'black-translucent' : 'default'
if (androidMeta) { if (androidMeta) {
androidMeta.content = themeColor androidMeta.content = themeColor
@@ -40,11 +41,11 @@ function apply(mode) {
} }
if (iosMeta) { if (iosMeta) {
iosMeta.content = themeColor iosMeta.content = themeStatus
} else { } else {
const newIosMeta = document.createElement('meta') const newIosMeta = document.createElement('meta')
newIosMeta.name = 'apple-mobile-web-app-status-bar-style' newIosMeta.name = 'apple-mobile-web-app-status-bar-style'
newIosMeta.content = themeColor newIosMeta.content = themeStatus
document.head.appendChild(newIosMeta) document.head.appendChild(newIosMeta)
} }
} }