首页 > 解决方案 > 在 Ionic 中禁用黑暗主题

问题描述

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

这就是我要的: 深色主题已禁用

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

启用深色主题

我想防止这种情况发生。我在网上搜索并找到了许多描述如何应用黑暗主题的文章,但我没有找到任何关于禁用它的信息。

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

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

标签: androidionic-frameworkandroid-dark-theme

解决方案


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

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

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

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

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

您可以在Ionic Docs中找到有关它的更多信息


推荐阅读