在 Ionic 中禁用黑暗主题
Posted
技术标签:
【中文标题】在 Ionic 中禁用黑暗主题【英文标题】：Disable dark theme in Ionic 【发布时间】：2020-12-26 21:04:34 【问题描述】：我正在设计一个 Ionic 应用程序，我希望它具有白色背景和黑色文本无论用户是否启用了深色主题。
这就是我想要的：
但是，当我在 android 手机上启用深色主题时，它会自动转换为：
我想防止这种情况发生。我在网上搜索了很多描述how to apply the 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') );
);
【讨论】：
以上是关于在 Ionic 中禁用黑暗主题的主要内容，如果未能解决你的问题，请参考以下文章