# How can I change the color in Theme Cosmos User Portal

**URL:** <https://forums.pega.com/t/how-can-i-change-the-color-in-theme-cosmos-user-portal/4468>\
**Category:** User Experience\
**Tags:** theme-cosmos, 8-8-3, user-experience\
**Created:** [May 15, 2023, 2:09pm UTC](https://forums.pega.com/t/how-can-i-change-the-color-in-theme-cosmos-user-portal/4468 "2023-05-15T14:09:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![CloeW938](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@CloeW938](https://forums.pega.com/u/CloeW938)\
**Post date:** [May 15, 2023, 2:09pm UTC](https://forums.pega.com/t/how-can-i-change-the-color-in-theme-cosmos-user-portal/4468/1 "2023-05-15T14:09:01Z")

</div>

Hello,

I am trying to find where I can change the color in Theme Cosmos User Portal, marked as below. Can anyone please tell me how?

 ![Cosmos Color.png](https://pega1.discourse-cdn.com/pega/original/2X/c/c9f62551d0f1dc85c740557ae84579e96bd6a404.png)

 ![Cosmos Color Expanded.png](https://pega1.discourse-cdn.com/pega/original/1X/9b6656b3f50fed0bd5051bda0fa1cd4f84f227e0.png)

Regards,

---

<div class="post-metadata">

**Author:** ![ArulDevan](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/aruldevan/32/16328_2.png) [@ArulDevan](https://forums.pega.com/u/ArulDevan)\
**Post date:** [May 16, 2023, 3:56am UTC](https://forums.pega.com/t/how-can-i-change-the-color-in-theme-cosmos-user-portal/4468/2 "2023-05-16T03:56:57Z")

</div>

Hi @CloeW938: Can you please check by overriding “case-header” css class in your application specific css file. You need to add the new css file in the additional style sheets in skin rule.

Thanks.

---

<div class="post-metadata">

**Author:** ![Dinesh\_Panda](https://avatars.discourse-cdn.com/v4/letter/d/5daacb/32.png) [@Dinesh\_Panda](https://forums.pega.com/u/Dinesh_Panda)\
**Post date:** [May 16, 2023, 5:12am UTC](https://forums.pega.com/t/how-can-i-change-the-color-in-theme-cosmos-user-portal/4468/3 "2023-05-16T05:12:46Z")

</div>

@CloeW938

Go to Skin rule - Included styles - Add a new CSS file with a proper name ex -PegaStyleOverrides

In it override the Pega OTB class of case header as :

.case-header{

background-color: #c7d1db (your color code)

}

Log-off and login, should work.

---

<div class="post-metadata">

**Author:** ![CloeW938](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@CloeW938](https://forums.pega.com/u/CloeW938)\
**Post date:** [May 16, 2023, 5:26am UTC](https://forums.pega.com/t/how-can-i-change-the-color-in-theme-cosmos-user-portal/4468/4 "2023-05-16T05:26:12Z")

</div>

@DineshP7654

Thanks, this approach worked. We used to be able to customize the background color from portal header in pyEndUser skin rule without using css ([How to change background colour in portal header | Support Center](https://support.pega.com/question/how-change-background-colour-portal-header)), but seems like this approach is not applicable to Theme Cosmos. pyEndUser is not even referenced in Theme Cosmos any more. As per your suggestion, I added a custom css file and included your snippet as below. Thank you!

1. From my application level Skin rule, add style sheet in included styles tab as below. The name is arbitrary.

 ![Skin.png](https://pega1.discourse-cdn.com/pega/original/2X/0/061c8ab96104569e260e8bbaa7d7f8c2ddaad53c.png)

1. Include below snippet.

```auto
.case-header{ background-color: green }

```

 ![css.png](https://pega1.discourse-cdn.com/pega/original/2X/9/9b0196395a5e078a15ec4d992008bc4d2821e8d9.png)

1. Here is the results.

 ![Portal Header customization.png](https://pega1.discourse-cdn.com/pega/original/2X/e/ee5921fee1299f974ad9b89db44276870a326211.png)

Regards,

---

<div class="post-metadata">

**Author:** ![Dinesh\_Panda](https://avatars.discourse-cdn.com/v4/letter/d/5daacb/32.png) [@Dinesh\_Panda](https://forums.pega.com/u/Dinesh_Panda)\
**Post date:** [May 17, 2023, 7:57am UTC](https://forums.pega.com/t/how-can-i-change-the-color-in-theme-cosmos-user-portal/4468/5 "2023-05-17T07:57:15Z")

</div>

@CloeW938 Awesome that’s for theme-cosmos. You will be able to do it back like earlier without writing code, while you use the latest - Constellation framework, under themes and settings.

---

<div class="post-metadata">

**Author:** ![CloeW938](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@CloeW938](https://forums.pega.com/u/CloeW938)\
**Post date:** [May 17, 2023, 3:05pm UTC](https://forums.pega.com/t/how-can-i-change-the-color-in-theme-cosmos-user-portal/4468/6 "2023-05-17T15:05:13Z")

</div>

@Dinesh Panda

Really! That’s good to know. Thank you very much for the additional information!

Regards,