ServiceNow Next Experience UI Theme to change Header Background for Instance and Complete Style change for instance::
The following system properties are set to true :
glide.ui.polaris.experience – true (By default, this property will be enabled )
glide.ui.polaris.dark_themes_enabled – true (This property needs to be enabled only when default dark variant is used in our newly created theme ).
1) Create a New Theme:
To create a theme, navigate to Now Experience Framework > Theme Management > Themes> Polaris
Note: Above one is default Theme – Open in new tab for reference to create your own theme and replace your default with your new theme.
2) Create New record in UI Themes table (sys_ux_theme) with your own theme name.
3) Before we proceed, you will need 3 branding colours as per the requirement:
- Primary
- Secondary
- Neutral
4) When you have those hex codes defined, navigate to Color Generator | Theme Tools (deoprototypes.com) This tool is going to handle.
The first step is to click Auto Generate as shown below and select respective colours and Click on Generate. This will create JSON format colour code then click on COPY JSON
5) Create Record in – UX Style table (sys_ux_style) with any Name and select type as CORE.
And paste copied JSON code as mentioned below:
{
"properties":
PASTE JSON CODE HERE
}
NOTE : In case you want to change only banner then no need of copying the JSON from the previous step. Instead add the below code with the required background colors.
{
"properties":{
"--now-unified-nav_header--background-color": "230, 218, 194"}
}
6) Now Open your Theme which you had created in the starting in Point 2 and add above UX style in Compositional: App Theme in Theme as per below Image and type as Core.
And add remaining OOB styles which we had seen in Default Theme (Polaris)as per above image
- Typography – Type - Core
- Dark – Type- Variant
- UI16 Dashboard Visualization Compatibility – Type - Core
7) For making your Theme as default –
- Create new Property -> Open sys_properties.LIST
- Create property with name as ui.polaris.theme.custom and Type as String
- Value as sys_id of your Own theme (created in Point 2 - copy sys_id of record) as shown in below image
Now refresh your browser and check for the new colour applied in your instance.
Play around using different Hex colour codes to determine most suitable colour and learn it with hands on.
NOTE: You can disable the below property for experiencing the ServiceNow with previous UI prior to San Diego, glide.ui.polaris.experience – false.
Happy with ServiceNow and Enjoy Now Experience 🙂
Hope you will find it as helpful. Don’t forget to Mark it Helpful and Bookmark article so you can easily find on your profile.
Thank you,
Dinesh Kumar Raghu,
Newrocket India Pvt Ltd
GmailID : dineshkumar.raghu9426@gmail.com
yes i have tried this technique but the main issue is the check box setting, its not showing that it is selected or not, can you help me in that.
HI @Omkar
Please add colors also along with below in your UX theme- compositional app theme, then that issue will resolve.
add below one also.
Happy with ServiceNow and Enjoy Now Experience 🙂
Hope you will find it as helpful. Don’t forget to Mark it Helpful and Bookmark article so you can easily find on your profile.
Thank you,
Dinesh Kumar Raghu,
Newrocket India Pvt Ltd
GmailID : dineshkumar.raghu9426@gmail.com
@Dinesh Kumar11 I only changed banner/header color with below code with RGB value. But We see color also updated in left navigator. Does below code or newly created theme make changes to oob left nav color?
OOB(Polaris):
After new style code:
Style Code:
Keep all the above style in your app theme it will resolve your issue
Using this method has turned the favourite dialog field of my instance to white
Do you know a fix for that issue? Any help would be very appreciated as my client i obviously not happy that the field has become almost invisible.
