当 ion-tab-button 处于活动状态时，如何更改图标的颜色？ CSS 离子

Question

I am using Ionic 4.12 I am working with the tab component, and i want to change the color of my ion-icon svg when i activate that tab. I'm trying to change the shadow dom of the ion-tab-button as the documentation shows with

--color-selected

--background-focused

in the css but it does not change it

tab bar code

<ion-tab-bar slot="bottom">
<ion-tab-button tab="mainview">
  <ion-icon src="assets/logo/mainView.svg"></ion-icon>
  <ion-label>INDICADORES</ion-label>
</ion-tab-button>

<ion-tab-button tab="profile">
  <ion-icon src="assets/logo/profile.svg"></ion-icon>
  <ion-label>PERFIL</ion-label>
</ion-tab-button>

<ion-tab-button tab="">
  <ion-icon src="assets/logo/phone.svg"></ion-icon>
  <ion-label>LLAMAR</ion-label>
</ion-tab-button>

<ion-tab-button tab="caregivers">
  <ion-icon src="assets/logo/doc.svg"></ion-icon>
  <ion-label>CUIDADORES</ion-label>
</ion-tab-button>

<ion-tab-button tab="help">
  <ion-icon src="assets/logo/help.svg"></ion-icon>
  <ion-label>AYUDA</ion-label>
</ion-tab-button>

current css of the icons

ion-tab-button{
font-size: 10px;
--padding-end: 0px;
--padding-start: 10px;
--padding-bottom: 0px;
--margin-left:0px;
--margin-right:0px;
max-width:100px;
ion-icon{
    font-size: 67.5px;
}

Answer 1

If you want to give another color when a class is active you can simply do the following:

.class:active {
    color: blue; 
}

However in your case this would be:

ion-tab-button:active{
    color: blue;
}

The color atribute also works with hex and RGB codes (see https://www.w3schools.com/cssref/css_colors_legal.asp for more)

I also reccomend to check this post out as this is related to the problem you are having at the moment. Editing Ionic tab icon styles

Answer 2

ion-tab-button{
font-size: 10px;
--background-focused: #a0a;
--color-selected: #a0a;
--padding-end: 0px;
--padding-start: 10px;
--padding-bottom: 0px;
--margin-left:0px;
--margin-right:0px;
max-width:100px;
ion-icon{
    font-size: 67.5px;
}}

this is the correct ionic way

Answer 3

This is the below CSS, we need to add it in component level CSS if we need to apply the styles only to the specific page.

Use of focus pseudo class, we can apply the style to the selected ion-tab-button

ion-tab-button:focus {
    ion-icon, ion-label {
        color: var(--ion-color-primary) !important;
        --ion-color-base: var(--ion-color-primary) !important;
    }
}

Answer 4

You can provide the custom css to selected tab. Whenever you select the tab "tab-selected" class is added in ion-tab-button.

.tab-selected {
  border-bottom: 5px solid blue;
}

Answer 5

There is one more way to customize your tabs in ionic. (my ionic version 6.12.0)

ion-tab-bar{
    background-color: white;
    overflow-x: auto;
    border:0px;
}

ion-tab-bar > ion-tab-button {
 
  border-radius: 20px 20px 20px 20px;
}

ion-tab-button[aria-selected=true] {
    color:white;
    background-color: #3689ef;
 }

 
 ion-tab-bar  ion-tab-button[aria-selected=true]:first-child {   
    border-radius: 0px 20px 20px 0px;
 }
 ion-tab-bar  ion-tab-button[aria-selected=true]:last-child {
  
    border-radius: 20px 0px 0px 20px;
 }

Answer 6

This is much more difficult to figure out than it should be but here's what worked for me:

In theme/variables.css

:root {

  /*put at the bottom after all other base styles*/
  --ion-tab-bar-color: #2a3042;
  --ion-tab-bar-color-selected: #556ee6;

}