Css Variables in Ionic 4

Ionic Framework
1

Hey!
I am trying to change the color of the icon in the selected tab in the ion-tabs component and I am really struggling with how to overwrite the CSS variables.

I’m doing the following the tabs page scss:

ion-tabs {
–color-selected: #ff7800 !important;
–ion-color-contrast: #ff7800 !important;
}

2

Here is how I accomplished it with different elements than those that you are using.

ion-card-header
{
background: var(–ion-color-primary);
}
ion-item
{
color: white;
}

Have you inspected the DOM to ensure that you are targeting the correct element? The reason I ask is due to the fact that I glanced over the new docs and did not see a reference for ion-tabs. The following is all that appears in the documentation:

–ion-tabbar-background-color Background color of the tabbar
–ion-tabbar-background-color-focused Background color of the focused tabbar
–ion-tabbar-border-color Border color of the tabbar
–ion-tabbar-text-color Text color of the tabbar
–ion-tabbar-text-color-active Text color of the active tab

Don’t forget about Shadow DOM!

1 Like
3

Hey @danieldugger ! I appreciate the response! I did take a look in the inspector and I will admit I was struggling a bit because the icons in the tabs are nested very deeply in the shadow Dom. However when I uncheck the checkbox next to --color-selected, I see the icons change in the browser, but when I overwrite that var, it looks like it gets reverted halfway down the shadow Dom tree.

4

I figured it out! It looks like --ion-color-contrast stems from the original them that you’ve applied to the component, in my case “dark”. So I actually need to overwrite --ion-color-dark-contrast as follows:

 ion-tabs {
    --ion-color-dark-contrast: #ff7800 !important;
}

Thanks @danieldugger for your help. Looking into the inspector a little further helped!

1 Like
5

Wonderful!

I’m new to all of this! So much to learn!

1 Like