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);

注意：

仅使用设置{/ 1>}属性的颜色自2003年版Ionic more info以来已被弃用。

<强>更新

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

您可以在color文件中添加此样式规则（使其成为全局），它只会更改标题而不会改变其他内容：

app.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将是您的背景颜色，对比度将是您的文字/图标颜色

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

2 个答案: