如何在Ionic 4中更改工具栏颜色 [英] How to change the toolbar color in Ionic 4

问题描述

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

I am working in my Ionic 4 app and I want to change the background color of the toolbar but it is not working.

我已经尝试过:

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

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

赞:

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

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

在何处定义--ion-color-contrast.在variables.scss文件或其他用于更改颜色的文件中.

where to define the --ion-color-contrast. In variables.scss file or some where else for changing the color.

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

Can anyone help me how the define the variables in the variables.scss for changing the colors in Ionic 4.

推荐答案

HTML:

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

在您的variable.scss文件中设置颜色

Set color in your variables.scss file

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

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

In your .ts file, you can initialize your "dynamicColor" variable to the default color

private dynamicColor: string

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

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

You can change color by calling function

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

这篇关于如何在Ionic 4中更改工具栏颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！