使用自定义颜色覆盖Ionic Header

Question

是否可以使用离子定制标题的颜色？根据自定义,我的意思是使用自定义颜色,而不是定义的颜色之一bar-something.我试过这个,但它似乎没有用

<ion-nav-bar class="bar-positive custom-dark">
</ion-nav-bar>

在CSS中:

 .custom-dark{
 color : #30393A;
 }

这是一个codePen

我似乎无法改变蓝色.

Answer 1

你可以用SASS做到这一点.如果您尚未输入终端

$ ionic setup sass

然后,您可以使用scss /目录中的覆盖.

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;

我强烈建议使用Ionic的CSS预处理器,它们有一个很棒的库,包含变量中的所有内容.

Answer 2

一个简单的修复方法是使用：

 .custom-dark{
    color : #30393A !important; // text
    background-color:blue!important; // for bg color
 }

这将覆盖当前的 CSS 集。

我认为添加到样式表中比添加到html本身更合适，因为它更容易开发、修改和不必要的膨胀。