如何在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

这应该有效：

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

仅在我的环境中确认过，这种颜色就不太明显了，因为它很亮，因此请尝试使用像blue这样的较暗的颜色来确保它正在变化。

引用documentation

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

Answer 2

HTML：

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

在您的variable.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 3

ionic 4 variable.scss：

VAR=OK

用于自定义页面：

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

对于自定义CSS：

<ion-toolbar color="primary">