Ionic Vue PWA如何修改iOS状态栏颜色？

你之前把theme-color标签放在组件的<template>里是无效的，浏览器只会识别<head>中的元数据标签，而且iOS上的PWA状态栏控制还需要结合Capacitor的API来实现，具体步骤如下：

1. 正确放置theme-color元标签 #

把theme-color标签移到项目根目录的index.html文件的<head>中，示例代码：

<head>
  <!-- 保留原有其他标签 -->
  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#3880ff" />
  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#eb445a" />
</head>

2. 使用Capacitor状态栏API控制（关键） #

iOS上的PWA尤其是添加到主屏幕后，需要通过Capacitor的状态栏插件来精准控制颜色：

• 首先安装插件：

npm install @capacitor/status-bar

• 在需要控制状态栏的页面或全局App.vue中，添加初始化代码：

import { onMounted } from 'vue';
import { StatusBar, Style } from '@capacitor/status-bar';
import { Capacitor } from '@capacitor/core';

onMounted(async () => {
  if (Capacitor.getPlatform() === 'ios') {
    // 检测系统的深色/浅色模式
    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
    
    // 设置状态栏文字样式（确保和背景色对比明显）
    await StatusBar.setStyle({
      style: isDarkMode ? Style.Dark : Style.Light
    });
    
    // 设置状态栏背景色
    await StatusBar.setBackgroundColor({
      color: isDarkMode ? '#eb445a' : '#3880ff'
    });
    
    // 确保状态栏显示
    await StatusBar.show();
  }
});

3. 测试注意事项 #

• iOS上的自定义状态栏颜色只有在PWA添加到主屏幕后才会完全生效，普通Safari浏览器中可能不会显示自定义效果；
• 测试时可以切换系统的深色/浅色模式，验证颜色是否自动切换。

内容的提问来源于stack exchange，提问作者kusumoto_teruya