Ionic ion-modal文本颜色跟随设备深色模式而非应用深色模式问题

你的问题核心在于Ionic的ion-modal内容挂载在body下的独立容器中，且组件使用Shadow DOM，导致主题切换时的.dark类样式无法自动穿透到模态框内的元素，同时可能存在全局CSS变量覆盖不完整的情况，使得模态框仍受系统深色模式的默认样式影响。

修复步骤 #

1. 完善全局主题变量覆盖

确保variables.css中所有原@media (prefers-color-scheme: dark)下的CSS变量都完整迁移到.dark类下，并且将.dark类添加到body元素上（而非仅组件根元素）。示例：

/* 浅色模式默认变量 */
body {
  --ion-text-color: #000000;
  --ion-background-color: #ffffff;
  --ion-modal-background-color: #ffffff;
  --ion-label-color: #000000;
  --ion-text-color-step-850: #000000;
  /* 补充其他Ionic默认变量，可参考官方主题文档 */
}

/* 深色模式变量 */
body.dark {
  --ion-text-color: #ffffff;
  --ion-background-color: #121212;
  --ion-modal-background-color: #1e1e1e;
  --ion-label-color: #ffffff;
  --ion-text-color-step-850: #ffffff;
}

这样所有Ionic组件（包括模态框内的ion-label、ion-text）会通过全局CSS变量自动响应主题切换。

2. 同步模态框的主题类（可选，用于动态切换场景）

如果需要在打开模态框后切换主题也能实时更新样式，可以手动给模态框的内容容器同步主题类：

import { ViewChild } from '@angular/core';
import { IonModal } from '@ionic/angular';

// 在组件中获取模态框实例
@ViewChild(IonModal) modal!: IonModal;

// 主题切换方法
toggleTheme() {
  this.isDarkMode = !this.isDarkMode;
  document.body.classList.toggle('dark', this.isDarkMode);
  
  // 同步模态框的主题类
  if (this.modal) {
    const contentContainer = this.modal.shadowRoot?.querySelector('.modal-content');
    if (contentContainer) {
      contentContainer.classList.toggle('dark', this.isDarkMode);
    }
  }
}

3. 强制全局样式优先级（针对顽固样式）

如果仍有样式未生效，可以在全局样式中增加优先级更高的规则，直接针对模态框内的元素：

/* 浅色模式下模态框文本样式 */
body:not(.dark) ion-modal::part(content) {
  --ion-text-color: #000;
  --ion-label-color: #000;
}

/* 深色模式下模态框文本样式 */
body.dark ion-modal::part(content) {
  --ion-text-color: #fff;
  --ion-label-color: #fff;
}

这里使用::part(content)穿透模态框的Shadow DOM，直接设置内容区域的CSS变量。

关键注意点 #

• Ionic组件依赖全局CSS变量实现主题切换，务必确保所有相关变量都在.dark类下覆盖完整
• 模态框的DOM结构独立于当前组件，需通过全局样式或手动同步类的方式确保主题生效
• 避免在组件局部样式中硬写颜色值，优先使用Ionic提供的CSS变量，减少冗余维护

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