如何在 Ionic App 中更改原色答案

【问题标题】：How to change the primary color in Ionic App如何在 Ionic App 中更改原色
【发布时间】：2020-09-11 23:20:36
【问题描述】：

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

theme.green.scss 主题.yellow.scss

如果我想将绿色和黄色作为主题的原色，我该怎么做？提前感谢您的帮助

【问题讨论】：

标签： ionic-framework sass

【解决方案1】：

如果版本 3 和 4 导航到 src/theme/variables.scss，这取决于您使用的 ionic 版本，您可以更改颜色。

【讨论】：

【解决方案2】：

您可以使用此代码更改或添加新颜色：

先去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 in --ion-color-gold: #ffd700;每一行到primary 这样就可以了改变它。

Reference

【讨论】：