Ionic5 Vue3增加内置主题颜色

ionic5 Vue3实战教程： https://www.itying.com/goods-1150.html

Ionic5 Vue3增加内置主题颜色

https://ionicframework.com/docs/theming/basics

找到src/theme/variables.scss文件，如下代码新增favorite颜色

:root {
  --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;
}

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

用法：

<ion-button color="favorite">
  自定义颜色
</ion-button>

也可以使用主题生成器生成主题颜色：

https://ionicframework.com/docs/theming/colors