Question

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

这就是我想要的：

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

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

我考虑过的一种解决方案是显式启用深色主题，然后为深色主题设置与浅色主题相同的颜色。但是，我认为这种方法可能不受欢迎，因为它涉及编写许多冗余代码。

您能想到其他替代解决方案吗？

Answer 1

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

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

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

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

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

您可以在 Ionic Docs

中找到有关此信息的更多信息

Answer 2

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

为了避免这种情况，只需“通知”MIUI我们的应用程序兼容暗模式，即使没有任何额外的变化，所以实际上暗模式和亮模式是一样的，但MIUI不会干扰使用应用程序的颜色。

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

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

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

Answer 3

转到您的 index.html 结束集：

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

它的强制手机使用你默认的暗模式风格