Question

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

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

并在CSS中：

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

Here is a 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预处理器，它们有一个很棒的lib，包含变量中的所有内容。

Answer 2

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

<system.web>
  <webServices>
    <protocols>
      <add name="HttpGet" />
      <add name="HttpPost" />
    </protocols>
  </webServices>
</system.web>

这将覆盖当前的css集..

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

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

在/ 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%;
    }

Answer 5

在themes / variables.scss

中覆盖此Ionic Sass变量

＆＃13;

$toolbar-background:#FFFFFF;

＆＃13;

You can find other Ionic Sass Variable list here:

Answer 6

在themes / variables.scss

中覆盖此Ionic Sass变量

$toolbar-title: #fff;

使用自定义颜色覆盖Ionic Header

6 个答案: