Ionic4.x Theming(主题) 增加内置主题颜色修改内置组件默认样式修改底部 Tabs 背景颜色以及按钮颜色...

柔光的暖阳◎ 2021-12-10 05:05 276阅读 0赞

**1、Ionic4.x Theming(主题)**

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

contrast 对比色，比如底部 tabs 的颜色是\#69bb7b 则里面按钮的颜色是\#ffffff

转载于:https://www.cnblogs.com/loaderman/p/10972028.html