Ionic项目强制亮/暗/跟随系统主题切换功能失效问题求助

问题核心 #

你遇到的问题是系统主题变化的监听器没有在切换到非自动模式时移除，存在两处冗余逻辑：

1. modeService.ts的setMode方法中，只要切到auto模式就会新增一个change监听器，但切换到light/dark模式时不会清理已有的监听器，后续系统主题变化仍会触发回调修改dark属性
2. app.component.ts的ngOnInit中单独添加了一个change监听器，这处监听器全程没有清理逻辑，不管你选择了什么模式，系统主题变化都会触发它修改modeService.dark的值

修复方案 #

1. 调整modeService.ts逻辑 #

新增监听器引用存储变量，每次设置模式前先清理旧的监听器：

dark: boolean;
mode = 'auto';
prefDark = window.matchMedia('(prefers-color-scheme: dark)');
// 存储系统主题变化的监听器引用，方便后续移除
private systemThemeListener?: (e: MediaQueryListEvent) => void;

constructor() { }

setMode = async (): Promise<void> => {
  const storeMode = this.mode;
  await Storage.set({
    key: 'mode',
    value: storeMode
  });
  // 先清理已有的系统主题监听器，避免无效监听
  if (this.systemThemeListener) {
    this.prefDark.removeEventListener('change', this.systemThemeListener);
    this.systemThemeListener = undefined;
  }

  if (this.mode !== 'auto') {
    this.dark = this.mode === 'dark';
  } else {
    this.dark = this.prefDark.matches;
    this.systemThemeListener = e => {
      this.dark = e.matches;
    };
    this.prefDark.addEventListener('change', this.systemThemeListener);
  }
};

checkMode = async (): Promise<void> => {
  const { value } = await Storage.get({ key: 'mode' });
  if (value) {
    this.mode = value;
    // 读取到存储的模式后直接调用setMode生效
    await this.setMode();
  }
};

2. 移除app.component.ts中的冗余监听逻辑 #

所有主题切换逻辑收拢到modeService处理即可，修改ngOnInit代码：

async ngOnInit() {
  await ... /// 其他原有逻辑
  // 删掉原来的prefDark监听逻辑，仅调用checkMode初始化配置
  await this.modeService.checkMode();
}

3. 功能验证 #

修改完成后测试三类场景即可：

• 锁定亮色模式：切换系统主题，应用始终保持亮色
• 锁定暗色模式：切换系统主题，应用始终保持暗色
• 自动模式：切换系统主题，应用跟随系统同步调整

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