How do you create a custom theme using the next experience UI that overrides the default "Polaris" theme?

[User656300]

I have created a custom theme in the new San Deigo UI with custom styles (color and header logo) as described in the product documentation, however, these styles do not get applied. Is there a specific process you have to follow to override the default "Polaris" theme? If I apply the custom color style as a variant under "Polaris", the new colors are available under user preferences (as a theme); when I do the same for the header logo, the "Now" logo remains. Has anyone created a custom theme record, or replaced the default header logo? I might just be missing a step somewhere.

[Dan H]

Hi,

Check this video out if you haven't seen it. It might be of help. They cover some custom themes.

https://www.youtube.com/watch?v=-z9dobdy34w&ab_channel=ServiceNowDevProgram

Hope this helps.

Please mark answer as helpful/correct based on impact

[User656300]

Thanks for the reply, @Dan H! I did watch this video, and they seem to just cover adding a variant to the Polaris theme. I was able to get that to work, I'm just not sure how to override Polaris entirely with an alternate theme. Adding a new imagery style to replace the header also didn't work for me under Polaris.

[Henrik Jutterst · Accepted solution]

Hi!

I found this post when I was looking for the same answer as you. But I think I found the answer posted by @Elliot West in his LinkedIn article: Creating your own theme in Polaris (Next Experience)

He created a theme using the following steps:

STEP 1 - Activate the Polaris theme & set the glide.ui.polaris.dark_themes_enabled property to true (We are going to create our new theme as a variant, similar to Dark mode)*

STEP 2: Follow the following steps:

1. Create an update set
2. Navigate to "Now Experience Framework > Themes"
3. Click on Polaris (not Polaris Default)
4. Click on style "Dark" in the UX theme styles
5. Right click and insert & stay
6. Rename the UX style to "My custom theme!" or whatever you want to call it
7. Now go to the "colors" UX style (it is read-only)
8. Copy all the Style JSON code
9. Paste this code into your own variant
10. Change the following variables (pick a RGB colour of your choice and play around by changing the variables.)
11. "--now-color--neutral": "79,86,100", (Line 3)
12. "--now-color--primary": "79,82,189", (Line 4)
13. "--now-color--secondary": "79,82,189", (Line 5)
14. "--now-color_chrome--brand": "48,47,75", (line 19)
15. "--now-color_brand--neutral": "79,86,100", (line 1240)
16. "--now-color_brand--primary": "79,82,189", (line 1241)
17. On the related list of the UX style UX THEME STYLE, create a new record and add it to Polaris.
18. Save and refresh. Then go to PROFILE > PREFERENCES > THEME and select the theme variable you just created.

I do agree that there is a lack of documentation regarding Next Experience, but hopefully information regarding this will get shared and Docs will provide better information regarding this.

Kind regards
/Henrik

[LC4]

Hi, do you want to try changing the type from variant to Core and using a higher order value than 0 so that it override the polaris theme style?