Change the header's background color in the Next Experience UI

[Maik Skoddow]

The Next Experience UI not only brings a completely new and cool design, but also a fully new framework under the hood that requires intensive training even if you want to change small things.

While you can configure a corporate logo as usual (see Customize the banner logo), this no longer works with all the colors. However, many customers would like to adjust at least the background color in the header - on the one hand, to bring in their corporate color here or to better differentiate the individual environments (DEV, TEST, PROD) from each other optically speaking.

To help you with the background color changes I have added a small Update Set to this page. After installing this Update Set in your ServiceNow instance, you only have to open the following record

https://<YOUR INSTANCE>.service-now.com/now/nav/ui/classic/params/target/sys_ux_style.do%3Fsys_id%3D88c67f411b2d11506bebfcc6cc4bcb9c

and replace the already existing RGB value in the field "Style":

Be really careful when setting the value!
Do not remove any other characters, like the quotation marks. If you leave the contents of the field "Style" as an invalid JSON value, you risk getting a white screen!

If you want to disable the header's background color, you have to go to the System Property glide.ui.polaris.theme.custom which was created by the provided Update Set and remove the value:

To make this Property System work, you need at least the version "San Diego - Patch 1".

If you are interested in the background of creating individual Next Experience UI themes, I recommend the following resources:

• Create your first Next Experience UI Theme (Article)
• Overriding the Next UI Theme - Live Coding Happy Hour (Video)

If you want to get links to more helpful resources about the Next Experience UI I recommend my article Platform: Next Experience || Knowledge & Troubleshooting Resources

[Alex Cripps]

Hi Maik,

I have  imported the XML document.  and i have also have copied the Sys.id to sys_properties and set the value to true/false. ( I think i have chosen the right on sys id) 

and also i have disabled the theme. 

My header is still not changing color 

thank you for listening 

[JP - Kyndryl]

Hi Maik,

This is working well for us,  but once on Tokyo, I had to fix a small issue with the checkboxes fields via this support note:  https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB1183175

Regards,

JP

[GretaD]

Thanks to everybody who suggested solutions. 

One of the issues I found out after reading several articles is that somehow all users were set to a different theme. I still find it strange but if a user have their own theme selected ( everybody had theme clean), then even if I change the system theme and if there is an entry in the user preferences then this will not apply.

What I did it set up System Theme for all users manually, luckily not a lot of users, but the issue is I can not find a way to not allow users to select their own theme.

[Joe Taylor]

I cannot seem to get the import set to work.

Can you please show us step-by-step how you created it?

I would like to learn how to do this myself.

Thanks

[dreinke]

Hi Maik - I've been using this for some time, but after upgrading to Utah (patch 2 at present) I'm seeing this with the Favorites popup from the app pill:

When you move the cursor over the grey lines the text shows up and the functionality works, it's just really confusing for Users:

I found an article that recommends blanking out the glide.ui.polaris.theme.custom property, which is not ideal, but neither is the weird dialog.  Have you seen this?

[Ashish Routray1]

How we can add a gradient 

[mourya]

Hi Maik -  Can we change the color of Process flow in Vancouver release as as it shows in white color rather than mint green as below images.

Tokyo Process flow image:

Vancouver Process flow: I would like to change the below flow as above color mint green. could you please help here is there a way to change the process flow color.

[zeno]

thank you, Maik, for your post, I'm surprised ServiceNow does not offer this functionality out-of-the-box!

the updateset does what is supposed to do, however, the check-boxes on any form, on a dark theme, don't render correctly, both the checked and un-checked check-boxes look like 'un-checked' -  this is a show-stopper, and the reason why I've rolled back the changes.

[jthomsen]

@dreinke 

I have the same issue as you. Have you found a solution for the favourite dialog field, I am yet to find a solution for it.

[purragangadharp]

The solution is Add this one into 

>UX Theme Polaris>App Theme>Create New> UX Theme Styles or add your Existing Theme and below is code to update

{
"base": {
},
"properties":{
"--now-unified-nav_header--background-color": "0,0,0",
"--now-popover--background-color": "0,0,0"
}
}

[jency83]

I regret to say that the provided update set was problematic at my end (version washingtondc-12-20-2023__patch1-hotfix2a-04-02-2024_04-05-2024_1127)

1. When changed the color it worked successfully but for some reason it also had significant impact on the look of standard forms

2. When I wanted to disable it and removed the value from sys property as suggested I ended up with constant loading of white screen, all menus were also loading and user profile/preferences were not accessible

After some intensive troubleshooting with my colleague we were able to open a BG script window using SN utils plugin (didn't work with simple /bg command). From there I set the sys property value back to what it is US and it started to work again. (I also downloaded Web Developer plugin for Chrome and tried to disable all CSS, not sure if this also allowed the BG script screen to open)

The only help to get rid of this theme was to delete the system property entirely

[NikhithaG]

Hi Everyone, 

 I am unable to change the   header background colour. I refer so many documents can anyone please  help me 

[AishwaryaS1]

Hi everyone,

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

[declannolan]

Like others commenting on this thread, I too had some issues with the approach above (e.g. "Create Favorite" dialog box turning white, and changes to field boxes on form views).  After some trial and error (and adapting AishwaryaS1's steps above, which didn't quite work for me) I found the that duplicating the Polaris theme/style settings (and changing the header colour property as required) worked for me.

Here are the full steps:

1. Go to UX Styles table (sys_ux_style.list)
2. Open the OOTB 'Colors' Style
3. Copy the 'Style' JSON and return to the UX Styles list
4. Click New and enter a name e.g. "Custom Banner Style"
5. Paste in the copied JSON
6. Navigate to line containing the "--now-unified-nav_header--background-color" property setting (e.g. Line 1922) and change the setting from "--now-color_chrome--brand-10" to the required colour RGB e.g. for red use "255,0,0".
7. Click Submit
8. Go to UX Themes table (sys_ux_theme.list) and find the "Polaris" UX Theme
9. Note the Styles linked to this theme in the "Compositional: App Theme" tab.
10. Return to the UX Theme list
11. Click New and enter name e.g. "Custom Banner Theme"
12. On the "Compositional: App Theme" tab,  click on the Style column and choose the Style you created in the step 4 above.
13. Then use the "Insert a new row…" functionality and add the same Styles as noted in the "Polaris" theme, apart from the "Colors" style. (Ensure all the styles have the same Order and Type as the "Polaris" theme).
14. Save the Theme
15. Copy the sys id
16. Got to sys_properties.list and click New
1. Name - glide.ui.polaris.theme.custom
2. Type – string (should be default)
3. Value – the sys id from previous step
17. Save the new System Property
18. Refresh the tab and the new banner colour should be visible
19. To change the banner colour again, just update the RGB value for "--now-unified-nav_header--background-color" in the custom Style, save and refresh the tab.
20. Ensure tables sys_ux_style and sys_ux_theme are excluded from a clone back so that the target instance banner colour is preserved.

[samuelharris2]

This worked for me on my Xanadu dev instance. Thank you!

[ihabeeb]

I have tried changing the color as per @AishwaryaS1 and @declannolan  suggestions, and i was bale to change the color of top header .But i could'nt change the header color in all other pages .
when it is homepage , i was able to distinguish between instances , but all the other pages the heading bar's color doesn't change .Is there any particular property in styles i can change for this , or is there any other way than this?

[christophenow]

Hello,

Be aware that there is now a free "Theme builder" plugin (sn_theme_builder), that simplify the adaptation of graphical chart into the instance.

Try it on a non prod. You will see that it is a very nice improvement.

Regards,