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

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

这是我尝试过的：

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

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

比如：

颜色：var（--离子颜色对比度）

在哪里定义离子颜色对比度。在

variables.scss

文件或其他地方更改颜色

有谁能帮助我如何在

variables.scss

中定义变量以更改爱奥尼亚4

中的颜色这应该可以：

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

刚刚在我的环境中证实了这一点，这种颜色不太明显，因为它很亮，所以请尝试使用较暗的颜色，如

蓝色

，以确保它在变化

参考文献

颜色是在

主题/variables.scss

文件中定义的，您可以使用这个方便的工具来帮助创建css，然后您可以将css复制并粘贴到

variables.scss

文件中，然后使用

var（--ion color primary）引用颜色
HTML：

<ion-toolbar [color]="dynamicColor"></ion-toolbar>

在.ts文件中，可以将“dynamicColor”变量初始化为默认颜色

private dynamicColor: string

constructor() {
   this.dynamicColor = 'light';
}

您可以通过调用函数来更改颜色

changeToDarkColor() {
    this.dynamicColor = 'dark';
}

离子4.scss：

--ion-toolbar-background: var(--ion-color-primary);
--ion-toolbar-color: var(--ion-color-light);

对于自定义页面：

<ion-toolbar color="primary">

检查这个@Hrishi。你能帮我解释一下吗？检查一下上面链接上的应用化学师给出的答案
<ion-toolbar color="primary">

.my-toolbar{
    --background: var(--ion-color-primary);
}