Ionic应用Capacitor构建iOS版本后prefers-color-scheme暗色模式不生效

问题原因 #

1. iOS项目配置强制固定外观：Capacitor生成的iOS项目如果在Info.plist中配置了UIUserInterfaceStyle键，值设置为Light或Dark，就会强制App使用固定外观，屏蔽系统暗色模式切换，导致@media (prefers-color-scheme: dark)媒体查询无法响应系统状态。
2. CSS代码存在语法和值错误：你提供的variables.css中存在两处明显问题：
   • .ios body选择器下的--ion-text-color被错误赋值为#141414（黑色），和下方--ion-text-color-rgb: 255,255,255（白色）完全不匹配，暗色模式下会出现黑底黑字的问题，容易误判为暗色模式未生效
   • .ios body代码块中--ion-color-step-950: #f2f2f2;后存在多余的独立分号，会导致后续的--ion-card-background等变量声明失效
3. Capacitor版本兼容性缺陷：3.0版本以下的Capacitor对iOS WKWebView的系统外观传递存在缺陷，不会将系统的暗色/亮色模式状态同步给WebView，导致Web侧的媒体查询无法识别系统外观。
4. WebView配置未开启外观跟随：部分旧版本Capacitor生成的iOS项目中，WKWebView默认未开启系统外观跟随，需要手动配置属性。

解决步骤 #

• 第一步：修改iOS项目Info.plist配置，打开ios/App/App/Info.plist文件，找到UIUserInterfaceStyle键，直接删除该配置项，让App默认跟随系统外观切换。
• 第二步：修复variables.css中的错误：
  1. 删除.ios body代码块中--ion-color-step-950: #f2f2f2;后多余的独立分号
  2. 将.ios body下的--ion-text-color: #141414;修改为--ion-text-color: #ffffff;，和对应的rgb值匹配
• 第三步：升级Capacitor到3.x及以上稳定版本，执行命令同步iOS项目：

  npx cap sync ios
  

• 第四步：如果以上步骤仍未生效，可手动在iOS端添加同步逻辑：打开ios/App/App/AppDelegate.swift，在应用启动生命周期方法中添加配置，让WKWebView的外观跟随系统。

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