用自定义颜色覆盖Ionic标题栏

Question

能否使用 Ionic 定制标题颜色？定制是指使用自定义颜色而不是已定义的 bar-something 颜色。我尝试过这样做，但似乎没有效果。

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

在CSS中：

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

这里是一个 CodePen

我似乎无法更改蓝色的颜色。

- Mel

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预处理器，他们有一个很棒的库，里面包含了所有变量。

- Ed Knowles

---

我没有测试过，但它似乎很有趣。谢谢你的提示。 - Mel

Answer 2

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

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

这将覆盖当前的CSS设置。

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

- Careen

---

只使用“background-color:#30393A !important;”就解决了问题。谢谢。 - Mel

这段文本对我来说无法工作，这还有效吗？ - Felipe Cesar Assis

Answer 3

如果你已经按照答案中所提到的运行了ionic setup sass，那么你需要在文件_variables.css中搜索和识别你想要覆盖的变量，然后在ionic.app.scss中进行覆盖。

对于bar-stable颜色，我在_variable.scss中找到了：

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

在ionic.app.scss中进行覆盖，使用以下内容：

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

这个有效。

- Ângelo Rigo

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

- user4423251

Answer 5

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

$toolbar-title: #fff;

- rajesh

Answer 6

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

$toolbar-background:#FFFFFF;

您可以在此处找到其他Ionic Sass变量列表：

- Sector0