在 Ionic 中禁用黑暗主题答案

【问题标题】：Disable dark theme in Ionic在 Ionic 中禁用黑暗主题
【发布时间】：2020-12-26 21:04:34
【问题描述】：

我正在设计一个 Ionic 应用程序，我希望它具有白色背景和黑色文本无论用户是否启用了深色主题。

这就是我想要的：

但是，当我在 Android 手机上启用深色主题时，它会自动转换为：

我想防止这种情况发生。我在网上搜索了很多描述how to apply the dark theme的文章，但是我没有找到任何关于禁用它的信息。

我考虑过的一个解决方案是明确启用深色主题，然后为深色主题设置与浅色主题相同的颜色。但是，我认为这种方法可能是不可取的，因为它涉及编写大量冗余代码。

您能想到任何替代解决方案吗？

【问题讨论】：

标签： android ionic-framework android-dark-theme

【解决方案1】：

删除深色主题的一种方法是编辑 variables.scss 文件并删除此样式规则：

@media (prefers-color-scheme: dark) {
  ...
}

当用户在设备上选择深色主题时，该媒体查询会更改 CSS 自定义属性的所有颜色。

还请查看index.html 文件中的color-scheme 元标记：

<meta name="color-scheme" content="light dark" />

您可以在 Ionic Docs

中找到有关它的更多信息

【讨论】：

感谢您的建议！但是，我的 Ionic 项目中没有这样的行，所以我无法删除它们。
哦，有趣。 @AldánCreo 如果您调试在该设备上运行的应用程序，是否有任何 CSS 自定义属性设置为应用程序中显示的任何“深色”颜色（例如页面背景）？
@AldánCreo 想知道您是否能够解决此问题以及如何解决？ :)
@Aldán Creo 嗨，你解决了这个问题吗？我也面临同样的情况
不幸的是，我没能解决它。这似乎是只出现在小米智能手机上的问题，并且与他们专门处理黑暗主题的方式有关。

【解决方案2】：

在这种情况下，当应用程序无法识别其代码上的暗模式支持时，小米 MIUI 会强制执行“尽力而为”暗模式。也就是说，基本上每个白色都会变黑，反之亦然，但也有一些其他颜色会自动变暗。

为避免这种情况，只需向 MIUI '告知'我们的应用程序兼容暗模式，即使没有任何额外的更改，所以实际上暗模式和亮模式是相同的，但 MIUI 不会干扰与应用程序的颜色。

只需在<head> 中输入下一行：

<meta name="color-scheme" content="light dark" />

重要提示：现在您的应用将与暗模式兼容，因此请小心设置组件的每种颜色和背景，如果没有设置默认值，请记住默认值与暗模式不同和灯光模式。

【讨论】：

谢谢！这是在某些 android 设备中以暗模式转换的 iframe 的解决方案
我认为这对于这种情况来说是一个很好的解决方法，但它不利于用户体验和可访问性。

【解决方案3】：

转到您的 index.html 结束集：

<meta name="color-scheme" content="light" />

它的 force 手机使用你默认的暗模式样式

【讨论】：

这并不能解决小米设备的问题。
在不使用 --device 的情况下运行命令“ionic cordova run android”，我在我的 redmi note 7 手机上对其进行了测试，它可以正常工作
这对我使用 Cordova 非常有效。谢谢。

【解决方案4】：

转到“主题”，您会找到“variable.scss”文件夹搜索以下内容

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

看到有--ion-background-color: #121212;，换成你喜欢的颜色。谢谢！

【讨论】：

我相信这个解决方案不适用，因为正如@Santiago 指出的那样，小米强制使用暗模式。所以无论如何它都会强制它，即使有这个修复。

【解决方案5】：

在平台准备好后将这些添加到您的component.ts 文件中：

document.body.setAttribute('data-theme', 'light');
document.body.classList.toggle('dark', false);

initializeApp() {
  this.platform.ready().then(() => {
    document.body.setAttribute('data-theme', 'light');
    document.body.classList.toggle('dark', false);
    SplashScreen.hide().then( () => { console.log('SplashScreenHide') } );
  });
}

【讨论】：