Is there a simple way to change the theme or color of the nav bar between instances in San Diego?

[CatchTheFletch]

In Rome and before I would change the color of the nav bar to quickly differentiate between my instances. Is there a way to do this in San Diego? It's not as natural to look at the url to see if it is dev, test, or prod compared to seeing the nav bar be a different color or having a completely different theme for each instance.

[CatchTheFletch]

Those are definitely great resources. While those may work for me I want something easy that I could explain to an end user. Something like "themes" in settings like there used to be was so easy to explain to people who work in SN but not that often.

[carleen]

Yeah I hear you! I didn't notice that you were trying to describe to an end-user. Sorry about that!

[CatchTheFletch]

Not a problem at all. I'm going to make a note of those for me and the other devs and keep looking for simple solutions for end users in the meantime. Thank you for the help!

[sheryl]

I have a longer post below about how we setup new themes.  If you are not currently seeing the "themes" box when you click into the profile, preferences -- try this:

sys_properties.LIST

Edit this property:

glide.ui.polaris.dark_themes_enabled

Set the value to True.

This will enable the "themes" tile on the user preferences, as well as provide the dark mode theme OOB.  If you want "other" themes/color combinations, you will need to create each of those as a new style, and once correctly configured, users will be able to select from the options on the Themes tile.

[sheryl]

We also had a need to change the header of the non-prod instances for easy visual identification. 

The part of your question asking if there is a "simple" way to do this... I wouldn't call it simple, as it does require a developer (admin access) to setup.

This activity needs to be done by a system administrator to create additional color themes.  AFTER the themes are created, the user can select the theme of their choice from their user preferences(if you setup new theme as a variant and themes are enabled).

PLEASE try this in your PDI before attempting in your PROD or NON-PROD environments! 

The steps I took:

1. Go to sys_properties and find the "glide.ui.polaris.dark_themes_enabled" property.  Set the value to True.

This will enable the "themes" option to be displayed under Profile/preferences.

2. Navigate to sys_ux_style.LIST.  Open the existing record "Colors"

Copy the contents of the Style field (ctrl-a, ctrl -c)

3. Navigate back to the ux style list view.

Click "New"

Name:  Demo Custom Color (or whatever you want to call your style)

Type:  Select "Variant"   (I recommend using variant until you are comfortable and confident you have the color options you want.  You can change this value later if desired).

Style:  Copy buffer contents from the Colors record here (ctrl-v)

Go to the end of the style text file and add the following line just above the last value (--now-color-brand--secondary":)

"--now-color_chrome--brand-10": "43, 163, 69",

The 3 number values here will give you a green header.

Submit

4.  Open your record from the list view (Demo Custom Color)

On the related records tabs at the bottom, click on the UX Theme Styles tab.

Click "New"

The default value in the style field is good.

For the Theme field, select 'Polaris'

Submit.

5.  On the header bar of your instance, click on the far right  round icon for your file profile and preferences.

Click on "Preferences"

Click on "Theme"

You should now see your default color theme, the Dark Theme AND your custom created theme.  Select your custom theme, and see if you like how it looks.

6.  We wanted our non-prod instances to default to the appropriate colors theme.  Our custom profile we called "non-prod".  We set the type to "Core" (instead of variant), and then this becomes the new default theme.   We have this file on each instance, and each instance we changed the number values to represent the color we wanted.  ie: 

     Green:  "43, 164, 69"

     Yellow:  "244,255,10"

     Pink:     "221,19,234"

     Purple:   "125.9.230"

We also put this record in our clone exception list so that it is not over-written each time we clone.  

Other Notes:

There is a color generator tool which can help you identify which colors you want:

Color Generator | Theme Tools (deoprototypes.com)

You can copy the contents from this app to create a whole new color theme, not just the header record.

My source document for figuring this out was:

Introduction to Themes in Next Experience UI - Next Experience - Article - ServiceNow Community

I hope this helps... I have attached some of the documents I used when setting this up.  Please let me know if there are questions!