# Ion-segment color change (Ionic 5)

**URL:** <https://forum.ionicframework.com/t/ion-segment-color-change-ionic-5/183573>\
**Category:** Ionic Framework\
**Created:** [February 18, 2020, 9:09pm UTC](https://forum.ionicframework.com/t/ion-segment-color-change-ionic-5/183573 "2020-02-18T21:09:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Catweazle101](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/catweazle101/32/115865_2.png) [@Catweazle101](https://forum.ionicframework.com/u/Catweazle101)\
**Post date:** [February 18, 2020, 9:09pm UTC](https://forum.ionicframework.com/t/ion-segment-color-change-ionic-5/183573/1 "2020-02-18T21:09:14Z")

</div>

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 ☹ ).  
It really takes so much time for me.

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

> **[Theming Basics - Ionic Documentation](https://ionicframework.com/docs/theming/basics)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

  
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](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](https://global.discourse-cdn.com/ionicframework/original/3X/3/8/38a5be58485a87eae1f86d8671b2797409a77aa8.png)

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

```auto
--ion-background-color:#afca0a;

```

it looks like this:

 ![segmentsWithBackground](https://global.discourse-cdn.com/ionicframework/original/3X/1/a/1ade19c0a1a07f71319123d7ffed7090198d1bce.png)

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](https://global.discourse-cdn.com/ionicframework/original/3X/2/4/242d6eddb8d409753e38253b781d165800eb0d12.png)

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

---

<div class="post-metadata">

**Author:** ![lucaceck95](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/lucaceck95/32/136797_2.png) [@lucaceck95](https://forum.ionicframework.com/u/lucaceck95)\
**Post date:** [February 19, 2020, 11:16am UTC](https://forum.ionicframework.com/t/ion-segment-color-change-ionic-5/183573/2 "2020-02-19T11:16:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Catweazle101](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/catweazle101/32/115865_2.png) [@Catweazle101](https://forum.ionicframework.com/u/Catweazle101)\
**Post date:** [February 19, 2020, 1:55pm UTC](https://forum.ionicframework.com/t/ion-segment-color-change-ionic-5/183573/3 "2020-02-19T13:55:24Z")

</div>

Thank you for you answer.

I tried following within .scss of the page component:

```auto
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 🙂