禁用Ionic中的暗黑主题

Question

禁用Ionic中的暗黑主题

androidionic-frameworkandroid-dark-theme

24

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

这是我想要的：

然而，在安卓手机上启用暗色主题时，它会自动转换为这个样子：

我希望避免这种情况发生。我在网上搜索了很多关于如何应用暗色主题的文章，但没有找到有关禁用它的任何内容。

我想到的一个解决方案是显式启用暗色主题，并为暗色主题设置与浅色主题相同的颜色。然而，我认为这种方法可能不太理想，因为它涉及编写许多冗余代码。

你能想到任何替代解决方案吗？

- Aldán Creo

7个回答

20

在这种情况下，小米MIUI会在应用程序未识别出其代码支持黑暗模式时强制启用“尽力而为”的黑暗模式。也就是说，基本上每个白色都将变成黑色，反之亦然，但还有一些其他颜色将自动变暗。

要避免这种情况，只需“通知”MIUI我们的应用程序支持黑暗模式，即使没有任何额外的更改，因此实际上黑暗和明亮模式将是相同的，但MIUI不会干扰应用程序的颜色。

只需在<head>中添加以下行：

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

重要提示：现在您的应用程序将支持暗黑模式，因此请注意设置每个组件的颜色和背景。如果没有设置并使用默认值，请记住默认值在暗黑模式和明亮模式下不同。

- Santiago

谢谢！这是一个解决在某些安卓设备上转换为暗模式的 iframe 的方法。 - Esteban Castro Sola

我认为这是一个不错的解决方法，但它违反了用户体验和可访问性。 - Sergio Cerrutti

8

对于 Ionic 6，您需要进入 variables.css 文件并删除或注释掉此代码块：

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

这样可以解决问题。

设置 <meta name="color-scheme" content="light" /> 没有帮助。

- Kirill Groshkov

这很有帮助，我稍后会处理暗色主题。 - Sivuyile TG Magutywa

6

前往您的index.html文件并设置：

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

它强制手机使用默认的光线模式样式

- Hérick Raposo

这并不能解决小米设备的问题。 - Santiago

运行命令“ionic cordova run android”，不使用--device参数，我在我的红米Note 7手机上测试过，它可以正常工作。 - Hérick Raposo

使用 Cordova，这对我完美地起作用了。谢谢。 - user3572565

4

前往 主题，在那里找到 variable.scss 文件夹，搜索以下内容

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

看到这里有 --ion-background-color: #121212;，请更改为您喜欢的颜色。谢谢！

- newbie

我认为这个解决方案不适用，因为正如@Santiago指出的那样，小米强制使用暗模式。因此，即使使用此修复程序，它也会强制启用。 - Aldan Creo

0

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

- whitehawk321

0

在你的CSS文件中添加 ion-row --background: none; 对我有用然后添加如果你的文本受到影响。在你的h2 h3标题下面添加颜色：和你想要的颜色。这对我完美地起作用。

- user21133955

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sebaferreras · Accepted Answer

取消暗色主题的一种方式是通过编辑 variables.scss 文件并移除以下样式规则：

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

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

请还要注意index.html文件中的color-scheme元标记:

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

您可以在Ionic文档中找到更多相关信息。