如何在基于Ionic、Angular和Capacitor开发的Android及iOS应用中禁用暗黑模式？

我之前也踩过MIUI强制给Ionic+Angular+Capacitor应用开启暗黑模式的坑，尤其是Redmi Note 9这类设备，系统会绕过应用自身的设置强行切换主题。你试过的两种方法没奏效，主要是因为MIUI的机制是从原生层面触发的，光改网页端配置不够。给你几个亲测可行的方案：

方案1：修改Android原生配置（最有效） #

MIUI的强制暗黑模式是针对Android应用的，所以直接在原生项目里禁用这个特性：

1. 打开Capacitor生成的Android项目，路径是 android/app/src/main/res/values/styles.xml
2. 在你的应用主题（一般是AppTheme）中添加以下属性：

<item name="android:forceDarkAllowed">false</item>

这个属性会明确告诉MIUI系统，不要强制给你的应用开启暗黑模式。
3. 如果项目里有values-night目录（用于暗黑模式主题），要么在该目录的styles.xml里也添加同样的属性，要么直接删除这个目录（如果你不需要自己的暗黑模式）。

方案2：Angular层面强制锁定浅色主题 #

配合原生配置，在应用启动时主动锁定浅色主题，防止系统偏好影响：

1. 在app.component.ts中注入Renderer2，然后在ngOnInit里添加逻辑：

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

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

  ngOnInit() {
    // 强制给body设置浅色主题类
    this.renderer.addClass(document.body, 'light');
    this.renderer.removeClass(document.body, 'dark');

    // 监听系统主题变化，一旦检测到暗黑模式，立刻切回浅色
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
      if (event.matches) {
        this.renderer.addClass(document.body, 'light');
        this.renderer.removeClass(document.body, 'dark');
      }
    });
  }
}

2. 彻底删除variables.scss里的暗黑模式媒体查询代码，而不是仅仅注释掉，避免MIUI的机制意外触发它。

方案3：配置Ionic主题强制浅色模式 #

利用Ionic的主题系统，明确指定只使用浅色模式：

1. 在theme/variables.scss的:root选择器中添加：

:root {
  color-scheme: light only;
  // 保留你原有的其他主题变量...
}

only关键字会让浏览器完全忽略系统的暗黑偏好，只应用浅色主题。

最后验证步骤 #

做完上述配置后，记得重新构建并同步Capacitor项目：

ionic build
npx cap sync android

然后在Redmi Note 9上测试，应该就能彻底解决MIUI强制暗黑模式的问题了。

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