使用自定义颜色覆盖 Ionic Header答案

【问题标题】：Override Ionic Header with custom color使用自定义颜色覆盖 Ionic Header
【发布时间】：2017-08-10 00:29:00
【问题描述】：

是否可以使用 ionic 自定义标题的颜色？通过自定义，我的意思是使用自定义颜色，而不是定义的 bar-something 之一。这个我试过了，好像不行

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

在 CSS 中：

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

Here is a codePen

我似乎无法更改蓝色。

【问题讨论】：

标签： html css angularjs ionic-framework ionic

【解决方案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 预处理器，他们有一个很棒的库，其中包含所有变量。

【讨论】：

我没有测试过，但看起来很有趣。谢谢你的提示。

【解决方案2】：

一个简单的解决方法是使用：

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

这将覆盖当前的 css 集..

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

【讨论】：

仅使用 'background-color:#30393A !important;'成功了。谢谢。
文本不起作用，至少对我而言。这仍然有效吗？

【解决方案3】：

由于您首先运行了答案中提到的 ionic setup sass，因此您需要在文件 _variables.css 上搜索并识别要覆盖的变量，并且您将在 中覆盖它们ionic.app.scss。

我确实在 _variable.scss 中找到了稳定条颜色：

$bar-stable-text: $button-stable-text !default;

并在 ionic.app.scss 中覆盖：

$bar-stable-text:                 #FFFFFF !default;

这行得通。

【讨论】：

【解决方案4】：

在 /www/css 目录下的 style.css 中添加这些行

.title.title-center.header-item {
        background-color:#F38023!important; // for bg color
        margin:0px!important;
        margin-left:0px!important;
        color: #ffffff!important;
        width: 100%;
    }

【讨论】：

【解决方案5】：

在themes/variables.scss 中覆盖这个Ionic Sass 变量

$toolbar-background:#FFFFFF;

You can find other Ionic Sass Variable list here:

【讨论】：

【解决方案6】：

在themes/variables.scss 中覆盖这个Ionic Sass 变量

$toolbar-title: #fff;

【讨论】：