ionic-framework - 如何在 Ionic 4 中更改工具栏颜色

Question

我正在使用 Ionic 4 应用程序，我想更改工具栏的背景颜色，但它不起作用。

这是我试过的：

ion-toolbar {
    --background: #f2f2f2;
}

ion-toolbar {
    background: #f2f2f2 !important;
}

喜欢：

颜色: var(--ion-color-contrast);

在哪里定义--ion-color-contrast. 在variables.scss文件或其他地方更改颜色。

任何人都可以帮助我如何在Ionic 4variables.scss中定义用于更改颜色的变量。

标签： ionic-frameworkionic4

Answer 1

这应该有效：

// global.scss
ion-toolbar {
  --background: #f2f2f2;
}

刚刚在我的环境中确认了它，这种颜色并不那么明显，因为它很浅，所以尝试使用更暗的颜色blue，以确保它正在改变。

参考文档

颜色在theme/variables.scss文件中定义，您可以使用这个方便的生成器来帮助创建 css，然后您可以将其复制并粘贴到variables.scss文件中，然后使用var(--ion-color-primary);.