Changing Page header in servicenow

ihabeeb
Tera Contributor

I am trying to differentiate DEV , TEST and PROD instances so that to avoid users mistakenly make changes to wrong environments .
I have created a custom theme (sys_ux_theme) and custom style(sys_ux_style) and changed the navigation headers and many other properties in style .
I also changed the browser tab icon in dev , so that it can easily identified
But i couldn't change the background color of page header. So now at DEV homepage , I am able to differentiate from PROD. But All the other pages look the same .
'"--now-unified-nav_header--background-color": "34,139,34",' - This is the property in style i changed so that it looks green .
I Also tried with theme builder , but couldn't change the page headers.
 How can i change each page headers ?
Is there a property (in style) for page headers ?


6 REPLIES 6

Maik Skoddow
Tera Patron
Tera Patron

Hi @ihabeeb 

you only need two records:

 

1) A new record at table sys_ux_style for defining the color:

 

MaikSkoddow_0-1747904565983.png

 

2) A connecting record at table m2m_theme_style to include that new style into the (Polaris) theme

 

MaikSkoddow_1-1747904665007.png

 

Maik

Hi @Maik Skoddow , 
I was able to incorporate my custom made style into polaris theme. 
Where I need help is the name of style property of page header.
I can change homepage header bar background by changing the property 'now_unified_nav_header_background_color' property . similarly is there a property for page header background, so that every other page than homepage looks different than PROD.

Here you can see my modified homepage and other pages .

Screenshot 2025-05-22 030846.pngScreenshot 2025-05-22 152437.png

Ankur Bawiskar
Tera Patron
Tera Patron

@ihabeeb 

you can use a simple chrome extension for this

Environment Marker 

also check this

Next Experience UI - Converting UI16 Themes to Next Experience UI Themes 

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader

Hi @Ankur Bawiskar , 
I need to make this change for all users , so chrome extension will not work .
Do you know about the page header's style property so that , I can change it directly in style and make it default , so that it is available for all users. 
what i mean by page header is the part where demand [view self service] is shown . I want to change the whole background of that bar in all pages other than homepage .Screenshot 2025-05-22 030846.png