Ionic 禁用爱奥尼亚风格中的黑暗主题

qzlgjiam 于 2023-02-06 发布在 Ionic

关注(0)|答案(7)|浏览(198)

我正在设计一个Ionic应用程序，我希望它有白色背景和黑色文本无论用户是否启用了黑暗主题。
这就是我想要的

然而，当我在Android手机上启用黑暗主题时，它会自动转换为：

我想防止这种情况发生，我在网上搜索了很多描述how to apply the dark theme的文章，但没有找到任何关于禁用它的内容。
我考虑过的一个解决方案是显式启用深色主题，然后为深色主题设置与浅色主题相同的颜色。然而，我认为这种方法可能不受欢迎，因为它涉及编写大量冗余代码。
你能想到其他的解决办法吗？

ionic-framework

来源：https://stackoverflow.com/questions/63794562/disable-dark-theme-in-ionic

7条答案

按热度按时间

bf1o4zei1#

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

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

当用户在设备上选择深色主题时，媒体查询将更改CSS自定义属性的所有颜色。
另请查看index.html文件中的color-scheme元标记：

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

您可以在Ionic Docs中找到有关它的详细信息

赞(0）回复(0）举报 2023-02-06

dfddblmv2#

在这种情况下，小米MIUI会在应用程序无法识别其代码中的深色模式支持时强制使用“最佳”深色模式。也就是说，基本上所有白色都将变为黑色，反之亦然，但也会自动调暗一些其他颜色。
为了避免这种情况，只需“通知"MIUI我们的应用程序是黑暗模式兼容的，即使没有任何额外的变化，所以事实上黑暗和光明模式将是相同的，但MIUI不会干扰应用程序的颜色。
只需在<head>中放入下一行：

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

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

赞(0）回复(0）举报 2023-02-06

x0fgdtte3#

转到您的index.html结束集：

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

它的力量手机使用你默认的黑暗模式风格

赞(0）回复(0）举报 2023-02-06

58wvjzkj4#

对于Ionic 6，您需要转到variables.css并删除或注解掉此块：
@media (prefers-color-scheme: dark) { ... }
帮我修好了。
设置<meta name="color-scheme" content="light" />没有帮助。

赞(0）回复(0）举报 2023-02-06

thtygnil5#

转到“主题”，在那里您可以找到“variable.scss”文件夹，搜索以下内容

.md body {
    --ion-background-color: #121212;
    --ion-background-color-rgb: 18,18,18;

看到有--ion-background-color: #121212;，改成你喜欢的颜色。谢谢！

赞(0）回复(0）举报 2023-02-06

eblbsuwk6#

在平台准备就绪后，将以下内容添加到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') } );
  });
}

赞(0）回复(0）举报 2023-02-06

kxxlusnw7#

添加离子行-背景：无;在你的css文件，它为我工作，然后添加，如果你的文本受到影响。在你的h2 h3标题颜色：还有你想要的颜色这对我很有效。

赞(0）回复(0）举报 2023-02-06