How to Change header Background color in Next Experience UI in Tokyo

[karishma shaik]

Hi Team ,

I have a requirement, How to change Background Header Color in Next Experience UI In Tokyo,

I was Change in System Properties Basic configuration UI 16 But it's not working

Please Help me

[Mike_R]

You'll need to create a new theme. This article is very helpful

https://www.servicenow.com/community/next-experience-articles/create-your-first-next-experience-ui-t...

[AishwaryaS1]

Hi @karishma shaik 

Before the Next UI, we always had a different background color on all of our lower environment instances to quickly tell them apart. After switching to Next UI we lost that capability and I did a lot of searching on how to regain this functionality. I could not find the answer in one spot. After much searching I was able to cobble together the solution and I am passing those results on here. We have tested this and have not had any issues.

Go to sys_ux_style.list
Open Colors
Copy All of JSON in the style box
Return to the UX Styles List and Click New
Enter a name
Paste in the JSON you previously copied
Search for “now-unified-nav_header--background-color”
In the Red text change the default color to the RGB color you want (hint: if you scroll to the top of the style you will see many examples of RGB colors you can copy)
Click Submit
Go to sys_ux_theme.list and click new
Give it a name
On the Compositional App Theme Click on the style column and choose the style you created in the previous step
Then use the insert a new row functionality and add three more styles
UI16 Dashboard Visualization Compatibility
Shape and Form
Typography
Save the Theme
Ensure all the styles have an order of 0 and a type of Core
Copy the sys id
Got to sys_properties.list and click NEW
Name - glide.ui.polaris.theme.custom
Type – string (should be default)
Value – the sys id from previous step
SAVE
Log out and log back in again and the new banner should be available
Ensure tables sys_ux_style and sys_ux_theme are excluded from a clone back

[AishwaryaS]

Thank you for your solution, It works for me.

[AishwaryaS]

Thank you this works!