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

Question

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

这个我试过了：

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

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

喜欢：

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

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

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

中的颜色

Answer 1

这应该有效：

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

刚刚在我的环境中确认过，这种颜色不太明显，因为它很亮，所以尝试使用像 blue 这样较暗的颜色，以确保它正在改变。

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

引用颜色

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

Answer 3

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

How to change the toolbar color in Ionic 4