无法更改离子 3 上导航栏的颜色

Question

我正在尝试像这样设置标题的颜色，但我不能。有什么建议，为了改变背景颜色？

<ion-header >  
<ion-navbar >
<img src="../../assets/img/Header.png">
</ion-navbar> 
</ion-header>

而 CSS 是

img {
display: block;
height: 20%;
width: 20%;
margin-left: auto;
margin-right: auto;
color: "#D3C3B4x";
background-color:"#cccccc";
}
.ion-navbar{
color: "#D3C3B4x";
background-color:"#cccccc";
}
.ion-header
{
background-color:"#cccccc";
position: absolute;
top: 5%;
left: 5%;
}

Answer 1

您可以从variables.scss文件将其添加到$colors数组中：

$colors: (
// ...
custom-color: #cccccc,
//...
);

然后在视图中使用它：

<ion-header >  
<ion-navbar color="custom-color">
<img src="../../assets/img/Header.png">
</ion-navbar> 
</ion-header>

Answer 2

它不起作用，但我做到了

loginmodal-page{
$color:#D1C3B0;
img {
display: block;
height: 20%;
width: 20%;
margin-left: auto;
margin-right: auto;
color: "#D3C3B4x";
background-color:"#cccccc";
}

.ion-header
{
background-color:$color;
position: absolute;
top: 5%;
left: 5%;
}
}

它工作正常

Answer 3

将以下内容放入srcthemevariables.scss

$toolbar-background: #cccccc;
$toolbar-border-color: #cccccc !default;
$toolbar-active-color: #cccccc !default;