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 

[Jugmaz]

I assume that this is for all users.

It would be kind a great to have one for individual persons - still useful!

[Rairai31]

Hi @Jugmaz, 
I was able to make it individual after following @Vincent Daniele steps but setting the UX Style type to Variant instead of Core.

And instead of creating/adding new theme style and putting it on the system property, I add it on the Polaris Theme.
1. On the UX Theme Styles related list of your UX Style, create new record

• Style - Select newly created style 
• Theme - Select Polaris 
• Applicability - Select which role users should see this style. For ex. Only all Admin should have this new style as option. 

2. Click Submit. 

Hope this helps!

[SusanWinKY]

THANK YOU! I was missing the part to add the 3 additional styles under Compositional App Theme.

[David Barclay]

Thanks Vincent!  These were great instructions.  I created a new theme for a 'green' banner color and it works (I see it in the user preferences menu).  However, two things on which I have a question:

1.  The dark theme was removed - so I just have the default theme and my new 'green banner' theme. Any thoughts on how I can bring the 'dark' theme back as a selectable option?

2.  Any thoughts on how I can make the customized themes available only to individual users?

Pic attached for reference - thanks!