How to change the servinow heder background color

[User687957]

Dear all,

We are running Zurinch Instance in our servicenow dev instance and we need to change the header background color.

The document on step by step process for doing this is not clear at all and does not work

Does  some of you succeed and point me out to correct working steps ?

Regards

[Aditya_hublikar]

Hello @User687957 ,

Refer this document here it is steps to update background header color :

How to update the background header color

If this helps you then mark it as helpful and accept as solution.

Regards,

Aditya

[User687957]

hello @Aditya_hublikar , they are 4 different records for Color to open so which one should be used ?

[User687957]

Hello @Aditya_hublikar ,

This is wierd, I follwo strictly the docuement step word by word and it does not work.

If you have just browse the web and give me simply the link , this is something I have done myself already.
In addition this docuement is from year 22 old

I am looking for someone who have really succeed to do it with step provided .

regards

[User687957]

I finally manage to find the correct steps to change the background color header as sample customisation.
The document link provide early is wrong and out of date.

Here is the correct steps :

ServiceNow Zurich — Change the entire Next Experience header color

1. Create a UX Style

Go to:

All → UX Styles

Create a new sys_ux_style record.

Use:

Field Value

Name	Custom Header Color
Type	Core

In the Style field, enter:

{
  "properties": {
    "--now-unified-nav_header--background-color": "0,91,150"  }
}

Replace 0,91,150 with your desired RGB color.

For example:

#005B96 → 0,91,150

Save.

---

2. Associate the Style with Polaris

This is the critical Zurich step.

Open:

m2m_theme_style.list

or:

https://YOUR_INSTANCE.service-now.com/m2m_theme_style_list.do

Click New.

Set:

Field Value

Style	Custom Header Color
Theme	Polaris

Save.

The relationship is now:

Polaris
   │
   └── Custom Header Color
          │
          └── --now-unified-nav_header--background-color

This is the method that worked in your Zurich instance and is also reported by Zurich users.

---

3. Do NOT create a custom Theme

For this particular requirement, you don't need:

• sys_ux_theme custom record
• glide.ui.polaris.theme.custom
• UX Style Asset
• UX Theme Style
• Theme Builder

The minimal configuration that worked for you is simply:

sys_ux_style
      ↓
m2m_theme_style
      ↓
Polaris

---

4. Refresh the Next Experience shell

After saving the relationship:

1. Log out
2. Log back in
3. Press:

Ctrl + Shift + R

The new header color should appear.