我正在设计一个 Ionic 应用程序,无论用户是否启用了深色主题,我都希望它具有白色背景和黑色文本。
但是,当我在 Android 手机上启用深色主题时,它会自动转换为:
我想防止这种情况发生。我在网上搜索并找到了许多描述如何应用黑暗主题的文章,但我没有找到任何关于禁用它的信息。
我考虑过的一种解决方案是明确启用深色主题,然后为深色主题设置与浅色主题相同的颜色。但是,我认为这种方法可能是不可取的,因为它涉及编写大量冗余代码。
您能想到任何替代解决方案吗?
我正在设计一个 Ionic 应用程序,无论用户是否启用了深色主题,我都希望它具有白色背景和黑色文本。
但是,当我在 Android 手机上启用深色主题时,它会自动转换为:
我想防止这种情况发生。我在网上搜索并找到了许多描述如何应用黑暗主题的文章,但我没有找到任何关于禁用它的信息。
我考虑过的一种解决方案是明确启用深色主题,然后为深色主题设置与浅色主题相同的颜色。但是,我认为这种方法可能是不可取的,因为它涉及编写大量冗余代码。
您能想到任何替代解决方案吗?
删除深色主题的一种方法是编辑variables.scss
文件并删除此样式规则:
@media (prefers-color-scheme: dark) {
...
}
当用户在设备上选择深色主题时,该媒体查询会更改 CSS 自定义属性的所有颜色。
另请查看文件中的color-scheme
元标记index.html
:
<meta name="color-scheme" content="light dark" />
您可以在Ionic Docs中找到有关它的更多信息
在这种情况下,当应用程序无法识别其代码上的暗模式支持时,小米 MIUI 会强制使用“尽力而为”的暗模式。也就是说,基本上每个白色都会变黑,反之亦然,但也有一些其他颜色会自动变暗。
为了避免这种情况,只需“通知”MIUI 我们的应用程序兼容暗模式,即使没有任何额外的更改,所以实际上暗模式和亮模式是相同的,但 MIUI 不会干扰颜色的应用程序。
只需放入<head>
下一行:
<meta name="color-scheme" content="light dark" />
重要提示:现在您的应用程序将与暗模式兼容,因此请小心设置组件的每种颜色和背景,如果没有设置默认值,请记住暗模式和亮模式的默认值不同.
转到“主题”,您可以找到“variable.scss”文件夹搜索以下内容
.md body {
--ion-background-color: #121212;
--ion-background-color-rgb: 18,18,18;
看到有--ion-background-color: #121212;
,换成你喜欢的颜色。谢谢!
转到您的 index.html 结束集:
<meta name="color-scheme" content="light" />
它的强制电话使用您默认的暗模式样式
平台准备好后,将这些添加到您的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') } );
});
}