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

User656300 · ‎03-22-2022

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.

Henrik Jutterst · ‎05-02-2022

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:

Create an update set
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 to "My custom theme!" or whatever you want to call it
Now go to 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 and play around by changing the variables.)
"--now-color--neutral": "79,86,100", (Line 3)
"--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)
"--now-color_brand--neutral": "79,86,100", (line 1240)
"--now-color_brand--primary": "79,82,189", (line 1241)
On the related list of the UX style UX THEME STYLE, create a new record and add it to Polaris.
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

View solution in original post

Kyle Johansen · ‎06-06-2022

this works as a one off

I currently have a "fix script" I run after I have cloned down to one of my instances.

It sets the "theme" default for that instance. How do I script this with the now experience polaris ui? Below is the code I used before. is it just as simple as changing grUserPreference.addQuery('name','glide.css.theme.ui16'); to grUserPreference.addQuery('name','glide.css.theme.polaris'); ? I think there is more, because I would also need to set that theme as a type "core" obviously the UserPreference.value would need to be updated with the sys_id.

SO is this even possible and to me it seems it would be totally different since the polaris ui is much different???

looks like I need to Navigate to System Property (sys_properties.list) , create New record like below and mention copied sysid

that means my script would need to be totally different and I would also need to change the "theme" to a "core" theme?

please anything will be helpful

thanks

KJJ

LC4 · ‎06-06-2022

Hi KJJ,

I found a helpful article: https://community.servicenow.com/community?id=community_article&sys_id=04cc7646db278114457ae6be13961... . It explains all 🙂

For individual user theme preference, I think it is stored in User preference table with the name of glide.ui.polaris.theme.variant