如何更改 ion-title 的颜色？

Question

我尝试在 ionic 2 中更改 ion-title 的颜色。

我有以下代码：

<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

作为一种替代方法，可以使用这样的东西：

ion-toolbar { --color: #940000 } 

根据需要设置颜色；放入 *.scss 文件。

享受吧！

Answer 2

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

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



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

base 将是您的背景颜色， contrast 将是您的文本/图标颜色

Answer 3

从 ion-title 元素中删除 color="..." 并在您的 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);

注意：

使用 just 设置颜色 color 属性自 3.0.0 版本的 Ionic more info 以来已被弃用。

更新：

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

您可以在app.scss 文件中添加此样式规则（使其全局化），它只会更改标题，不会更改其他内容：

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