如何更改离子标题的颜色？

Question

我尝试改变离子2中离子标题的颜色.

我有以下代码:

<ion-header>
  <ion-navbar>
   <ion-title primary>Title</ion-title>
  </ion-navbar>
</ion-header>

颜色ion-title不要改变.我尝试了几件事:

<ion-title color="primary">Title</ion-title> 
<ion-title> 
    <p primary>Title</p>
</ion-title>

第二个我的标题是正确的颜色,但标题很大.所以我在variables.scss中添加它:

$toolbar-ios-height: 5rem; // ios
$toolbar-md-height: 5rem;  // android

但没有任何改变.有人有解决方案吗？或者我是否必须使用p或h标签来改变颜色？

Answer 1

color="..."从ion-title元素中删除并在variables.scss文件中使用此sass变量:

$toolbar-md-title-text-color: #777;
$toolbar-ios-title-text-color: #777;
$toolbar-wp-title-text-color: #777;

如果要使用指定颜色变量中包含的颜色

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,

  ...

  custom:     #777
);

你可以这样使用map-get:

$toolbar-md-title-text-color: map-get($colors, custom);
$toolbar-ios-title-text-color: map-get($colors, custom);
$toolbar-wp-title-text-color: map-get($colors, custom);

注意:

自从3.0.0版本的Ionic 更多信息以来,已经弃用了仅使用color属性设置颜色.

更新:

[...]导航栏上的所有元素都会改变颜色,我们可以更改离子标题吗？或者有第二个变量来改变其他元素？

您可以在app.scss文件中添加此样式规则(使其成为全局),它只会更改标题而不会更改其他内容:

.toolbar-title.toolbar-title-md, 
.toolbar-title.toolbar-title-ios, 
.toolbar-title.toolbar-title-wp { color: map-get($colors, custom); }

Answer 2

我知道这个问题已经得到解答,但另一种在标题中设置文本颜色的方法是在variables.scss文件中,

$colors: (
    calm: (
      base: #000,
      contrast: #ffc900
    ),
   etc..
);



<ion-navbar color="calm">
    <ion-title>Some Text</ion-title>
</ion-navbar>

base将是您的背景颜色,对比度将是您的文本/图标颜色