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

【问题标题】：How to change the toolbar color in Ionic 4如何在 Ionic 4 中更改工具栏颜色
【发布时间】：2019-07-24 04:18:25
【问题描述】：

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

这个我试过了：

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

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

喜欢：

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

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

谁能帮我在variables.scss 中定义变量以更改Ionic 4 中的颜色。

【问题讨论】：

【解决方案1】：

离子 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);
}

【讨论】：

【解决方案2】：

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';
}

【讨论】：

【解决方案3】：

这应该可行：

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

刚刚在我的环境中证实了这一点，这种颜色不太明显，因为它很浅，所以尝试使用更暗的颜色，例如 blue，以确保它正在发生变化。

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

【讨论】：