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

Question

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

我尝试过的

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

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

喜欢：

颜色：var（-ion-color-contrast）;

在哪里定义--ion-color-contrast。在variables.scss文件中或其他用于更改颜色的位置。

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

Answer 1

HTML：

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

在 variables.scss 文件中设置颜色

$colors: (
   blue:    #387ef5,
   secondary:  #32db64,
   danger:     #f53d3d,
   light:      #f4f4f4,  
   dark:          #222 
);

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

private dynamicColor: string

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

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

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

Answer 2

这应该工作：

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

刚刚在我的环境中确认了它，这种颜色并不太明显，因为它很亮，因此请尝试使用更暗的颜色blue以确保其变化。

参考文件

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

Answer 3

离子 4 变量.scss：

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

对于自定义页面：

<ion-toolbar color="primary">

对于自定义 css：

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