如何成功自定义 ionic global css 颜色？

Question

我试图将 ion-item 背景更改为不透明的白色背景以使文本更清晰，但是当我测试更改变量 css 中的颜色时，我没有成功。

这是我在 html 中更改颜色 = "primary" 时的结果

但是，当我使用以下代码自定义颜色时，视图没有任何变化。

全球CSS

  --ion-color-test: #1d8f9e;

HTML

 <ion-item color="test" class="item item-trns text-center">
        <ion-label style="color:black!important"position="floating" >Email</ion-label>
        <ion-input type="text" formControlName="email"></ion-input>
      </ion-item>

我得到这个结果

我做错了什么？

Answer 1

您需要按照此处的指南进行操作： https://ionicframework.com/docs/theming/colors#adding-colors

简而言之：

在 "root" 选择器中创建颜色：

:root {

  // other base colors above:

  // you new color below:

  --ion-color-favorite: #69bb7b;
  --ion-color-favorite-rgb: 105,187,123;
  --ion-color-favorite-contrast: #ffffff;
  --ion-color-favorite-contrast-rgb: 255,255,255;
  --ion-color-favorite-shade: #5ca56c;
  --ion-color-favorite-tint: #78c288;
}

然后在 variables.scss 中添加 class 并且在此处保留 class 的命名非常重要：

.ion-color-favorite {
  --ion-color-base: var(--ion-color-favorite);
  --ion-color-base-rgb: var(--ion-color-favorite-rgb);
  --ion-color-contrast: var(--ion-color-favorite-contrast);
  --ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
  --ion-color-shade: var(--ion-color-favorite-shade);
  --ion-color-tint: var(--ion-color-favorite-tint);
}

The class must be written in the format .ion-color-{COLOR} where {COLOR} is the name of the color to add

现在您可以在模板代码中使用 color="favorite"。

为了让一切变得更简单，Ionic 团队制作了这个颜色创建工具： https://ionicframework.com/docs/theming/colors#new-color-creator

如何成功自定义 ionic global css 颜色？

How can I customise ionic global css colors succesfully?

css

ionic-framework

ionic4