Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

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