Angular Ionic PWA实现浅色/深色/自动三种主题模式切换求助

1. 补全全局深色模式样式 #

默认初始化的Ionic项目未自动绑定body.dark类对应的深色主题变量，需要在src/theme/variables.scss或src/global.scss中添加如下样式：

body.dark {
  --ion-background-color: #121212;
  --ion-background-color-rgb: 18,18,18;

  --ion-text-color: #ffffff;
  --ion-text-color-rgb: 255,255,255;

  --ion-border-color: #222222;

  --ion-color-step-50: #1e1e1e;
  --ion-color-step-100: #2a2a2a;
  --ion-color-step-150: #363636;
  --ion-color-step-200: #414141;
  --ion-color-step-250: #4d4d4d;
  --ion-color-step-300: #595959;
  --ion-color-step-350: #656565;
  --ion-color-step-400: #717171;
  --ion-color-step-450: #7d7d7d;
  --ion-color-step-500: #898989;
  --ion-color-step-550: #949494;
  --ion-color-step-600: #a0a0a0;
  --ion-color-step-650: #acacac;
  --ion-color-step-700: #b8b8b8;
  --ion-color-step-750: #c4c4c4;
  --ion-color-step-800: #d0d0d0;
  --ion-color-step-850: #dbdbdb;
  --ion-color-step-900: #e7e7e7;
  --ion-color-step-950: #f3f3f3;

  --ion-toolbar-background: #1e1e1e;
  --ion-item-background: #1e1e1e;
  --ion-card-background: #1e1e1e;
}

2. 修正模式切换逻辑 #

原有代码存在两个问题：

• setMode方法固定添加dark类，没有根据选择的Light|Dark|Auto模式做判断
• 系统主题变化监听、初始化读取存储值后没有触发样式更新
  修正后的TS代码如下：

mode = 'auto';
prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

constructor() {
  // 系统主题变化时，仅在Auto模式下更新样式
  this.prefersDark.addEventListener('change', (e) => {
    if (this.mode === 'auto') {
      document.body.classList.toggle('dark', e.matches);
    }
  });
}

ngOnInit() {
  // 页面初始化时读取存储的模式并应用
  this.checkAwake();
}

setMode = async (): Promise<void> => {
  const storeMode = this.mode;
  await Storage.set({
    key: 'keep',
    value: storeMode
  });
  this.applyMode();
};

checkAwake = async (): Promise<void> => {
  const { value } = await Storage.get({ key: 'keep' });
  if (value) {
    this.mode = value;
  }
  this.applyMode();
};

// 抽离模式应用公共方法
private applyMode = () => {
  let shouldAddDark = false;
  switch(this.mode) {
    case 'dark':
      shouldAddDark = true;
      break;
    case 'light':
      shouldAddDark = false;
      break;
    case 'auto':
      shouldAddDark = this.prefersDark.matches;
      break;
  }
  document.body.classList.toggle('dark', shouldAddDark);
};

3. 切换控件绑定 #

将切换控件的选中值双向绑定到mode变量，选择变更时触发setMode方法即可实现三种模式的正常切换。

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