How to update the background header color in the Next UI

[Vincent Daniele]

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. 

1. Go to sys_ux_style.list
   1. Open Colors
      1.       Copy All of JSON in the style box
   2. Return to the UX Styles List and Click New
      1. Enter a name
      2. Paste in the JSON you previously copied
      3. Search for “now-unified-nav_header--background-color”
         1. 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)
         2. Click Submit

1. Go to sys_ux_theme.list and click new
   1. Give it a name
   2. On the Compositional App Theme Click on the style column and choose the style you created in the previous step
   3. Then use the insert a new row  functionality and add three more styles
      1. UI16 Dashboard Visualization Compatibility
      2. Shape and Form
      3. Typography
   4. Save the Theme
   5. Ensure all the styles have an order of 0 and a type of Core
   6. Copy the sys id
2. 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
   4. SAVE
3. Log out and log back in again and the new banner should be available
4. Ensure tables sys_ux_style and  sys_ux_theme are excluded from a clone back

I hope this helps all others that have struggled with this 

[nickt]

Any idea why the sn-themes application has been made private with no warning from ServiceNow?

[Sam10]

awesome!!! thanks Vincent!

I see that in the clone profile, "preserve theme" is there under options. If it is checked (by default it is), then we don't need to update the exclusions list?

[mohinid]

Hi @Vincent Daniele Thanks for this its working fine, I followed the same steps to change the header color for the instances, the form view has been changing attached the picture below, any solution for this issue??

[maria03]

This was a good start for me to understand how the theme works but i wanted to be able to have a set of themes for the users to select and i was able to accomplish this by following the steps of another article:

Navigate to "Now Experience Framework > Themes"
Click on Polaris (not Polaris Default)
Click on style "Dark" in the UX theme styles
Right click and insert & stay
Rename the UX style and save (keep this open)
Now go back to polaris theme and click the "colors" UX style (it is read-only)
Copy all the Style JSON code
Paste this code into your own variant
Change the following variables (pick a RGB colour of your choice )
"--now-color--primary": "79,82,189", (Line 4)
"--now-color--secondary": "79,82,189", (Line 5)
"--now-color_chrome--brand": "48,47,75", (line 19)
On the related list of the UX style UX THEME STYLE, create a new record and add it to Polaris.
Save and refresh.
Go to PROFILE > PREFERENCES > THEME and select the theme variable you just created.
https://www.servicenow.com/community/now-platform-forum/how-do-you-create-a-custom-theme-using-the-n...