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:

4) When you have those hex codes defined, navigate toColor 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 Themeas 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 –

1. Create new Property -> Open sys_properties.LIST
2. Create property with name as ui.polaris.theme.custom and Type as String
3. 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