Question

我正在尝试将Ionic 4应用程序的工具栏中的后退按钮图标设为白色。我添加了：

ion-back-button {
  --color: white;
}

在我的global.scss中，但该图标仍然显示为灰色。我已经设法将工具栏标题设置为白色。

这是我的模板

<ion-toolbar>
    <ion-buttons slot="start">
        <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Title</ion-title>
</ion-toolbar>

我希望能够简单地定义一个全局样式来全局更改所有后退按钮的颜色，而不必使用后退按钮向每个页面添加额外的标记。

Answer 1

我刚才遇到了这个问题，--color 变量似乎不起作用，但是使用 color 标志设置 !important 却起作用了。

这是我所做的，请注意 focused 和 hover 变量在您需要更改时似乎确实有效。

  ion-back-button {
    color: #fff !important;
    --color-focused: #fff;
    --color-hover: #fff;
  }

Answer 2

在global.scss中添加以下样式

ion-icon.sc-ion-back-button-md , ion-icon.sc-ion-back-button-ios
{
  color: #fff !important;
}

Answer 3

我有同样的问题。无论我尝试了什么，我都无法将离子后退按钮的颜色从灰色更改为灰色。因此，我使用Chrome开发人员工具检查了该元素，并了解到我已加载的第三方模块的主题将灰色应用于所有 span 标签。幸运的是，我不再需要该模块，所以对我来说，答案是简单地删除对主题的引用。

导致此问题的模块是AWS Amplify。

我将在此处发布此“答案”，以帮助您或其他任何人采取“下一步”措施来解决“令人发指的”问题：使用Chrome开发者工具检查DOM中的后退按钮元素，以识别出正在应用。

Answer 4

检查您的 variables.css 文件，应该有 @media (prefers-color-scheme: dark) 部分与深色主题颜色相关。您还需要将彩灯设置为 ion-back-button。

如何在Ionic 4中更改后退按钮图标的颜色？

4 个答案: