用自定义颜色覆盖 Ionic Header

Question

是否可以使用 ionic 自定义 header 的颜色？通过自定义，我的意思是使用自定义颜色而不是定义的 bar-something 之一。我已经试过了，但它似乎不起作用

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

并在 CSS 中：

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

Here is a codePen

我好像改不了蓝色了。

Answer 1

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

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

这将覆盖当前的 css 集..

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

Answer 2

您可以使用 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 3

由于您首先运行离子设置 sass 如答案中所述，您需要搜索并确定要在文件上覆盖的变量 _variables.css 并且您将在 ionic.app.scss 中覆盖它们。

对于酒吧稳定的颜色，我发现 _variable.scss :

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

并在 ionic.app.scss 中覆盖：

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

这有效。

Answer 4

将这些行添加到 style.css 目录下的 /www/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%;
    }

Answer 5

覆盖 themes/variables.scss

中的这个 Ionic Sass 变量

$toolbar-background:#FFFFFF;

You can find other Ionic Sass Variable list here:

Answer 6

覆盖 themes/variables.scss

中的这个 Ionic Sass 变量

$toolbar-title: #fff;

用自定义颜色覆盖 Ionic Header

Override Ionic Header with custom color

html

css

angularjs

ionic-framework

ionic