Ionic 6 Angular项目Android端始终显示深色模式如何修复？

问题根源 #

你的variables.scss中@media (prefers-color-scheme: dark)的规则，可能和Ionic默认的深色模式机制冲突，或是Android系统对原生媒体查询的检测逻辑存在偏差，导致该规则始终被触发，进而强制显示深色界面。

修复方案 #

1. 检查并调整Capacitor配置 #

打开capacitor.config.ts，确认是否存在强制开启深色模式的配置，若有则移除或设为false：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.your.app',
  appName: 'YourApp',
  webDir: 'www',
  bundledWebRuntime: false,
  // 移除或注释这行，避免强制深色模式
  // darkMode: true
};

export default config;

2. 替换原生媒体查询为Ionic主题选择器 #

放弃原生的prefers-color-scheme媒体查询，改用Ionic官方推荐的body.dark选择器，确保和框架主题系统兼容：

// variables.scss
// 删除原有的@media (prefers-color-scheme: dark)块，替换为：
body.dark {
  --ion-background-color: #121212;
  --ion-text-color: #ffffff;
  --ion-primary-color: #4285f4;
  // 其他自定义深色模式变量...
}

3. 手动同步系统主题状态 #

在根组件app.component.ts中添加监听逻辑，实时同步系统主题变化并切换Ionic主题类：

import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor(private platform: Platform) {}

  ngOnInit() {
    this.platform.ready().then(() => {
      // 初始化时检测系统主题
      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
      this.toggleDarkMode(isDarkMode);

      // 监听系统主题切换事件
      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
        this.toggleDarkMode(event.matches);
      });
    });
  }

  private toggleDarkMode(enable: boolean) {
    document.body.classList.toggle('dark', enable);
  }
}

4. 清除缓存并重新构建 #

Android端易存在缓存残留，执行以下步骤确保修改生效：

• 清除应用的本地缓存数据
• 重新构建项目：ionic build
• 同步到Android平台：npx cap sync android

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