ionic 4.x Theming(主题) 增加内置主题样式

1、ionic 4.x 主题

Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改。
https://ionicframework.com/docs/theming/advanced

2、Ionic4.x 增加内置主题颜色

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

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

• 使用：

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

3、修改内置组件默认样式

官方文档：https://ionicframework.com/docs/api/button

在 ionic4.x 组件中有 CSS Custom Properties。可以通过 CSS Custom Properties 提供的样式来修改 ionic4.x 内置组件的默认样式。
找到 src/theme/variables.scss 文件修改 ion-button 的默认样式。

ion-button {
  --color: #222; 
  --background:red;
}

4、修改底部 Tabs 背景颜色以及按钮颜色

<ion-tabs>
  <ion-tab-bar slot="bottom" color="favorite">
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

.ion-color-favorite {
  --ion-color-base: #69bb7b; 
  --ion-color-base-rgb: 105,187,123; 
  --ion-color-contrast: #ffffff;  // 对比色
  --ion-color-contrast-rgb: 255,255,255; 
  --ion-color-shade: #5ca56c; 
  --ion-color-tint: #78c288;
}

--ion-color-contrast 是对比色，比如底部的tabs的颜色是#e5e5e5，则里面的按钮的颜色是#ffffff;