我正在设计一个Ionic应用程序,并希望它无论用户是否启用了暗色主题都具有白色背景和黑色文本。
这是我想要的:
然而,在安卓手机上启用暗色主题时,它会自动转换为这个样子:
这是我想要的:
![dark theme disabled](https://istack.dev59.com/Qk2K1.webp)
我希望避免这种情况发生。我在网上搜索了很多关于如何应用暗色主题的文章,但没有找到有关禁用它的任何内容。
我想到的一个解决方案是显式启用暗色主题,并为暗色主题设置与浅色主题相同的颜色。然而,我认为这种方法可能不太理想,因为它涉及编写许多冗余代码。
你能想到任何替代解决方案吗?
我希望避免这种情况发生。我在网上搜索了很多关于如何应用暗色主题的文章,但没有找到有关禁用它的任何内容。
我想到的一个解决方案是显式启用暗色主题,并为暗色主题设置与浅色主题相同的颜色。然而,我认为这种方法可能不太理想,因为它涉及编写许多冗余代码。
你能想到任何替代解决方案吗?
取消暗色主题的一种方式是通过编辑 variables.scss
文件并移除以下样式规则:
@media (prefers-color-scheme: dark) {
...
}
当用户在设备上选择暗黑主题时,该媒体查询将更改CSS自定义属性的所有颜色。
请还要注意index.html
文件中的color-scheme
元标记:
<meta name="color-scheme" content="light dark" />
您可以在Ionic文档中找到更多相关信息。<head>
中添加以下行:<meta name="color-scheme" content="light dark" />
重要提示:现在您的应用程序将支持暗黑模式,因此请注意设置每个组件的颜色和背景。如果没有设置并使用默认值,请记住默认值在暗黑模式和明亮模式下不同。
对于 Ionic 6,您需要进入 variables.css
文件并删除或注释掉此代码块:
@media (prefers-color-scheme: dark) { ... }
这样可以解决问题。
设置 <meta name="color-scheme" content="light" />
没有帮助。
前往您的index.html文件并设置:
<meta name="color-scheme" content="light" />
它强制手机使用默认的光线模式样式
前往 主题
,在那里找到 variable.scss
文件夹,搜索以下内容
.md body {
--ion-background-color: #121212;
--ion-background-color-rgb: 18,18,18;
看到这里有 --ion-background-color: #121212;
,请更改为您喜欢的颜色。谢谢!
在平台就绪后,请将以下内容添加到您的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') } );
});
}
在你的CSS文件中添加 ion-row --background: none; 对我有用 然后添加如果你的文本受到影响。 在你的h2 h3标题下面添加颜色:和你想要的颜色。 这对我完美地起作用。