在 Ionic 中禁用深色主题

Question

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

这就是我想要的：

但是，当我在 Android phone 上启用深色主题时，它会自动转换为：

我想防止这种情况发生。我在网上搜索过，发现很多文章都描述了how to apply the dark theme，但是我没有找到关于禁用它的任何内容。

我考虑过的一个解决方案是明确启用深色主题，然后为深色主题设置与浅色主题相同的颜色。但是，我认为这种方法可能是不可取的，因为它涉及编写大量冗余代码。

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

Answer 1

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

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

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

另请查看 index.html 文件中的 color-scheme meta-tag：

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

您可以在 Ionic Docs

中找到更多相关信息

Answer 2

前往您的 index.html 结束集：

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

强制phone使用默认暗模式样式

Answer 3

在这种情况下，当应用无法识别其代码中的深色模式支持时，小米 MIUI 会强制使用 'best effort' 深色模式。也就是说，基本上每个白色都会变成黑色，反之亦然，但也有一些其他颜色会自动变暗。

为避免这种情况，只需'inform'向MIUI说明我们的应用程序兼容深色模式，即使没有任何额外的更改，所以实际上深色和浅色模式将是相同的，但是MIUI不会干扰应用程序的颜色。

就在<head>里面放下一行：

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

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

Answer 4

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

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

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

Answer 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') } );
  });
}

Answer 6

对于 Ionic 6，您需要转到 variables.css 并删除或 comment-out 此块：

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

帮我修好了。

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

在 Ionic 中禁用深色主题

Disable dark theme in Ionic

android

ionic-framework

android-dark-theme