如何在Ionic App中更改原色

时间:2018-10-04 19:47:36

标签: ionic-framework sass

在我的variables.scss文件中,我的原色为棕色。我有2个主题文件:

theme.green.scss theme.yellow.scss

如果我想将绿色和黄色作为主题的原色,该怎么做?预先感谢您的帮助

2 个答案:

答案 0 :(得分:0)

如果版本3和版本4导航到src / theme / variables.scss,则可以更改颜色。

答案 1 :(得分:0)

您可以使用以下代码更改或添加新颜色:

首先转到src/global.scss

:root {
    --ion-color-gold: #ffd700;
    --ion-color-gold-rgb: 255, 215, 0;
    --ion-color-gold-contrast: #000000;
    --ion-color-gold-contrast-rgb: 0, 0, 0;
    --ion-color-gold-shade: #e0bd00;
    --ion-color-gold-tint: #ffdb1a;
}
.ion-color-gold {
    --ion-color-base: var(--ion-color-gold) !important;
    --ion-color-base-rgb: var(--ion-color-gold-rgb) !important;
    --ion-color-contrast: var(--ion-color-gold-contrast) !important;
    --ion-color-contrast-rgb: var(--ion-color-gold-contrast-rgb) !important;
    --ion-color-shade: var(--ion-color-gold-shade) !important;
    --ion-color-tint: var(--ion-color-gold-tint) !important;
}

因此,当您可以像这样使用它时,现在有了一种名为gold的新颜色:

<ion-button color="gold">We now have a gold button :)</ion-button>

如果您想更改primary的颜色,只需更改gold 以这种方式--ion-color-gold: #ffd700;primary的每一行 更改它。

Reference