Ion-segment color change (Ionic 5)

Ionic Framework
1

Hi all,

I really like Ionic. I’m quite fast with programming everything of logic and functionality.
But honestly I have to say the Styling part of Ionic is still a huge pain in the ass for me (sorry to say :frowning: ).
It really takes so much time for me.

I think I understand the concept so far and was is written here in the documentation:


But I always have strange behaviours and a lot of things which don’t work as expected.

My problem now:

I copied the ion-segment example of the official ionic-documentation to my app (page).
Example I used: https://github.com/ionic-team/ionic-docs/blob/1fb1f7e658e4cbcc4cdf92534b7bdde3f3967b51/src/demos/api/segment/index.html
The colors are all still default. And also the default background color of the app is white.
In the example you see the ion-segements are using the color settings like ‘warning, danger’ and so on…
But in a slightly lighter color version which I like.

segmentsDefault
segmentsDefault668×576 54.5 KB

But when I change ONLY the background custom variable in variables.scss

--ion-background-color:#afca0a;

it looks like this:

segmentsWithBackground
segmentsWithBackground670×572 53 KB

You see the background-color shines anyhow through the ion-segements.
I see the same effect also on other built in ionic-components.

How can I use the background color that it has no impact on the ion-segment?

The solution should be like this:
solution

Maybe there is a simple solution, but I also want to understand it.
I don’t understand why the background color can have an impact to those ionic-components since
there are built as Web Components and should be encapsulated?

Thanks for any support
Oliver

2

it seems that every component that has a background, takes the background color you setted.
try to set the background color ONLY in your .scss file linked with the .html file

3

Thank you for you answer.

I tried following within .scss of the page component:

ion-content {
    --ion-background-color: #afca0a;
}

But the outcome was the same as above. Everything is in green :-/

Or do you mean I have to set the background individually for each component?
But this would be a little strange.

I really try to understand it, but for me it looks not easy customizable in simple way.
Because I really play only with those custom variables and nothing else :slight_smile: