The Now Platform® Washington DC release is live. Watch now!

Help
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ashley Snyder
ServiceNow Employee
ServiceNow Employee
 Center of Excellence / Next Experience / Theming Overview

 

 

This article provides information on Next Experience UI theming and what to expect when Next Experience UI is enabled versus disabled. This article will explore different scenarios based upon where you are at on your theming and workspace journey. Use the table of contents to navigate to the area you have a question about, or how to theme based upon the family release you're on with Next Experience UI enabled.
Table of Contents

 

 

 

 

Next Experience UI is enabled

 

 

What comes out-of-the-box with Next Experience UI?

 

The Next Experience UI comes with the Polaris theme out-of-the-box. The Polaris theme has two color variants, light and dark theme. Light theme is enabled by default, and administrations can choose to enable dark theme if they wish via a system property. Dark theme has different capabilities based upon the family release you're on. See this article for more information on dark theme.

 

Dark theme is only supported with the Polaris theme and is not supported on custom themes as of Utah.

 

The Polaris theme is applied to any Next Experience pages such as configurable workspaces or other pages modified in UI Builder. It is also extended to the Classic Environment, which is our new name for forms and lists that your users are used to working in.

 

 

 

How does Next Experience UI theming impact configurable workspaces?

 
When using Next Experience UI and configurable workspaces, the configurable workspace is wrapped within Next Experience UI and inherits the theming applied to Next Experience UI. We have an architecture article that goes into more depth on this here. Themes applied to Next Experience UI will cascade down to the configurable workspace using the new compositional theming data model, and the theme for the workspace itself cannot be edited in UI Builder.
 
 
neuiconfig.png

 

Next Experience UI enabled, displaying a configurable workspace and classic environment list.

 

 

The compositional data model was introduced to handle theming on multiple experiences, i.e. using Next Experience UI and multiple configurable workspaces as well as future scenarios. A compositional theme uses one Theme record, acting as a wrapper, and multiple Style records associated to the Theme record to provide styling for fonts, colors, logos, shapes, etc.
 

UX Theme.png

 

 

Theming on San Diego/Tokyo

 
If you're on the San Diego or Tokyo release, you'll have to create a theme manually. If you're close to upgrading to Utah, we recommend continuing to use the Polaris theme if possible, and using Theme Builder once you're on Utah. Themes that were created manually in San Diego/Tokyo cannot be edited in Theme Builder as of the Utah release, so you'll have to continue editing these themes using the JSON structure once you upgrade.
 
We've created an article on creating your first Next Experience UI theme with steps on how to do this in San Diego and Tokyo.
 
 

Theming on Utah+

 

If you're on Utah+ we recommend using Theme Builder, which is our new Store application to create a theme in a matter of minutes. We have a Next Experience Academy session available on YouTube so you can learn more about our new theming engine and Theme Builder, see the Create your first Next Experience UI theme article with a link to the session and more information on Theme Builder.
 
themebuilder.png

 

 
 
 

Next Experience UI is disabled

 

 

If you're on a previous release such as Quebec or Rome, or are using San Diego+ with Next Experience disabled configurable workspaces will utilize the Legacy theme data model. The legacy theme data model is basically a large JSON object with CSS variables for your theme. You can manage legacy themes in this scenario by opening your configurable workspace in UI Builder, navigating to Settings > Branding and theming > and selecting the theme. Configurable workspaces will also open in a separate browser tab.
 
Note: Legacy data model themes will not be converted to Compositional App Themes used in Next Experience UI and will need to be recreated. If you plan to enable Next Experience UI in the near future, we recommend waiting on theming your configurable workspace and using Theme Builder to create your Next Experience UI theme to see how it is applied to your configurable workspace.
 
 
neuidisabled.png
Next Experience UI is disabled, configurable workspaces do not uptake Core UI theming and open in a separate browser window.
 
For more information on how to theme configurable workspaces with Next Experience UI disabled see the product documentation:
 
 
 

Portal experiences or other custom experiences created in UI Builder

 
As mentioned above, Next Experience UI extends to configurable workspaces and classic environment forms and lists. As of Utah it does not extend to portal experiences created in UI Builder or App Engine Studio, as well as any other custom experiences that can be modified in UI Builder. These experiences are themed independently of Next Experience UI and still utilize the Legacy Theme Data Model. 
 
For more information on how to theme portal or custom experiences see the following product documentation:
 

 


Agent Workspace

 
Agent Workspace does not use Next Experience UI theming. There are limited branding colors you can use on Agent Workspace which is done through the Agent Workspace form. Agent Workspace branding settings are not compatible with configurable workspaces or Next Experience UI. See this product documentation for branding information for Agent Workspace.
 

 


FAQ

 
Q: Can I migrate Core UI/UI16 themes to Next Experience?
 
A: There is no migration method from Core UI themes to Next Experience UI themes. We have provided feedback to our product teams. As of the Utah release themes from Core UI will need to be recreated either manually (San Diego/Tokyo) or with Theme Builder (Utah+).
 
Q: Can I have different themes per configurable workspace using Next Experience UI?
 
A: You can do this using the applicability model via persona/role. See this article for more information. Be advised this method will also apply to the Next Experience UI Unified Navigation header and not just configurable workspace elements.
 
Q: Can you theme Service Portal or Employee Center with Theme Builder?
 
A: No, the Branding Editor is still the solution for theming Service Portal(s).
 
Q: Does Theme Builder work for portal experiences or other experiences created/configured in UI Builder?
 
A: Not as of the Utah release, Theme Builder only applies to Next Experience UI and configurable workspaces with Next Experience UI enabled.

 

 
Comments
James A M Foot
Tera Expert

@Ashley Snyder your guide shows us how to create a variant and you've also shared links to the SN Docs on how to create and extend a theme, but how do we make a new theme (not a variant) default for all users?

Great guide 👏, thank you

Ashley Snyder
ServiceNow Employee
ServiceNow Employee

@James Foot instead of making a style a variant you would choose Core and give it a higher Order value than the default style you wish to override. With Next Experience UI enabled you would associate new style records to the default 'Polaris' theme instead of creating a new theme. With Next Experience UI disabled you can continue to create a theme per your experience (workspace, etc.).

JagjeetSingh
Kilo Sage
Kilo Sage

If you want to apply the theme variant to all the users by default then create a system preference record like below.

find_real_file.png

RubenFuertes
Tera Guru

Hi, Thanks for the guide! it's awesome.

The only difference in my case, is the logo configuration. If I set a number higher than 0 as order, the logo is the Servicenow logo, on the other hand if I set 0 as order the logo are displayed correctly.

find_real_file.png

Drew West
Tera Contributor

I found that "--now-color_chrome--brand" changes the background color of the All/Favorites/History/Workspace menus and the header, which I needed.  Is there a guide/list that will show you what styles do what for the Platform interface?

Also I noticed that if you do not get the formatting right when putting in the Style the interface loads with a blank screen.  So someone may want to look at that since if you get it wrong and reload you will not be able to fix it because the interface will not load.  Tested in San Diego Patch 2 HF 1a.

**** Example **** Missing double quotes around the 91,207,69
{
"base": {
"--now-color_brand--primary": 91,207,69
},
"properties":{
}
}

**** Example **** notice the spaces in the "18, 92, 26"
{
"base": {
"--now-color_chrome--brand": "18, 92, 26"
},
"properties":{
}
}

Drew West
Tera Contributor

You can also set a system user preference to do the same thing.

 

Luiz Lucena
Tera Guru

This is awesome, Ashley!

However, if the only thing we want to modify is the header color, which property would be?

Some folks rely on colors to distinguish between DEV, TEST, UAT and PRD... 

 

Thanks, 

DrewW
Mega Sage
Mega Sage

See my post above, it is "--now-color_chrome--brand".  But it uses a version of that color for other things.

 

NFGDom
Tera Guru

For me I found that this change the color of the header only - "--now-color_chrome--brand-10"

Hope this helps!

Ashley Snyder
ServiceNow Employee
ServiceNow Employee

@Drew West there isn't a graphic at the moment which calls out the specific variables, though I did list some of the basics in the Walk-Through. The Style Hooks links posted in the article will show all of the CSS Variables we use.

In the Walk-Through section I do mention adding the JSON blocks to prevent this known defect and how to remediate if it occurs. 

Ashley Snyder
ServiceNow Employee
ServiceNow Employee

Support recently released this article, but be advised the CSS Variable only targets the header, not the dropdown menus. https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB1118116 This is why I mentioned the Color Generator method in the walkthrough if admins want a more full theme with the header to target the menus as well.

{
    "properties": {
        "--now-unified-nav_header--background-color": "YOUR RGB VALUE"
    }
}

 

 

DrewW
Mega Sage
Mega Sage

Nice, now I'm wondering what 0 to 9 do...

DrewW
Mega Sage
Mega Sage

I hope they are going to document/release a more graphical version that point so where each CSS var is used.  The existing one appears to leave a lot of them out.

Luiz Lucena
Tera Guru

Awesome!

Thanks, Ashley! That should be enough for us!

NFGDom
Tera Guru

Is there a way to order the themes under user preferences? Ideally I'd like alphabetical past the default one but it doesn't seem to have any order to it.

Thanks!

find_real_file.png

Sirraj
Tera Expert

Hi @Ruben Fuertes / @Ashley Snyder ,

I have created a custom theme, custom style and added my logo in ux style assets in the related list. But logo didnt reflected in banner. Am i missing anything? Kinly help me on the same.

Regards,

Sirraj

RubenFuertes
Tera Guru

Hi Sirraj,

Have you tried setting 0 as the order like me?

Sirraj
Tera Expert

I have one query.

As per the docs, I have attached logo in UX Style Asset related list. But the screenshot which you have shared is a different table.

Let me tell you what i did, my requirement is change the banner colour and logo.

1) I have created a theme "Custom Theme" in (sys_ux_theme) table.

2) I have added ux theme style "Custom Style" in (sys_ux_style) table where i have mentioned the css style to change the background color with an order 0. Along with this custom style record, i have also OOB Dark, Typography, UI16 Dashboard styles as well with an order 1.

With the help of step 1&2, am able to change the banner color successfully.

3) For changing the logo, I have opened the "Custom Style" record which i created in step 2 and there is one related list called UX Style Assets. I have attached a logo there.

Is my step 3 is correct..??

 

Regards,

Sirraj

Jim Melton
Kilo Expert

Somewhat late to this thread, but according to Elliot West's post on Linked in, I should be able to track these new theme variants in an update set. This does not appear to be the case, at least for me.

In addition to this, I now have a bunch of themes that I no longer want in our Dev environment that I can't delete because they are in a scope I can't modify.

So, my questions are:

- How can I get these updates in an update set (exporting/importing XML does not seem to work)?

- How can I remove theme variants I no longer want?

Jim

Daniel Peel
Tera Guru

Does anyone find that the "secondary" color... goes away for all but the initial loading of the home page?  I like the feel that gives but once you leave this page... it's gone. The one pointed to below

find_real_file.png

Ashley Snyder
ServiceNow Employee
ServiceNow Employee

@Jim Melton 

This article has been updated to direct users on to how to create a theme and override the default theme. Previous guidance informed users to add styles to the default theme, which cannot be captured and is in a private scope.

What you can do is follow this article to create a theme and move the existing styles you want into that theme, and move it with update sets. This will allow you to not only move the theme, but not have to interact with the private scope. 

To remove theme variants from the private scope, you should be able to do this via an m2m table called: UX Theme Styles (m2m_theme_style) records you have created here should not be in the private scope and can be removed from the default theme. 

Jim Melton
Kilo Expert

Thanks for the link to the updated article. I'm pretty sure I attempted to delete from that table but was unable to.

I'll give it another look and we'll see what happens.

Thanks again!

Jim

Patrick Quinlan
Kilo Guru

This is great information Ashley. 

In the article, it was mentioned that if we want to change just the color of the header, we should use this property: "--now-unified-nav_header--background-color"(although I didn't find that in the listing of style hooks)

 

If we wanted to just change the background color of the All, Favorites, and History menus, is there a similar property we could set?

Akshya Vasant
Tera Contributor

This is very helpful. I did change the Theme as per the above guide, however, I noticed that the Checkbox field appears to be white when checked. Not sure why this is happening. Can someone provide assistance in changing the color of the tick in the Checkbox field?

find_real_file.png

Akshya Vasant
Tera Contributor

@Ashley Snyder This is very helpful. I did create a new Theme as per the above guide, however, I noticed that the Checkbox field appears to be white when checked. Not sure why this is happening. Can you assist in fixing this issue?

find_real_file.png

 

Thank you,

Akshya

priyankag
Tera Contributor

@Akshya Vasant - Hi, I am facing the same issue. Were you able to figure this checkbox field out ?

Yasuko1
Tera Contributor

@Akshya Vasant  I am also facing the same issue. Please let me know which property is related to the color of check box.

Yasuko1
Tera Contributor

@priyankag
@Akshya Vasant 
Please add this one in  as background color of check box. Any color is fine.

"--now-checkbox--background-color--checked":"76,81,85"

Ashley Snyder
ServiceNow Employee
ServiceNow Employee

@Akshya Vasant which version are you on?

Ashley Snyder
ServiceNow Employee
ServiceNow Employee

I don't believe there is right now but I will let the product team know of this.

Yasuko1
Tera Contributor

@priyankag  @Akshya Vasant 

Please add this one in the color style. Any color is fine.

"--now-checkbox--background-color--checked":"76,81,85"

find_real_file.png

Yasuko1
Tera Contributor

Please add this one in the color style. Any color is fine.

"--now-checkbox--background-color--checked":"76,81,85"

find_real_file.png

mattystern
Kilo Sage

Hi Sirraj,

Were you able to figure this out? I'm having the same problem following the documentation.

Step 5-8 in the docs here:find_real_file.png

Step 3, 9 in the docs here (and association with the style in step 1-2):find_real_file.png

Icon not displaying:

find_real_file.png

 

Same logo file used in our UI16 here:
find_real_file.png

Appreciate any tips!

-Matt

mattystern
Kilo Sage

Solved my own problem here. It seems in my Development environment, I had a corrupted image in System Properties > Basic Configuration leftover from the good ol' days. Thus, my logo would load for a split second, then it was overwritten by the corrupted logo.

My ticket on hi.servicenow.com believes the root cause was "due to a corrupt .iix file in sys_attachment" and said you can check glide.product.image.light. However, I had re-uploaded this multiple times under System Properties > Basic Configuration UI16 (where this property gets updated), so I am left unsatisfied with this root cause.

My icon only started displaying when I updated the icon from the System Properties > Basic Configuration menu. I think the property for this one is glide.product.image.

Looks like I can replicate this in my test environment what this looked like for me.

Corrupted image:

find_real_file.png

Working image in UI16 menu:

find_real_file.png

Hopefully this is helpful to someone! Please let me know if someone finds more information on this if they have any. 

-Matt

Ashley Snyder
ServiceNow Employee
ServiceNow Employee

If you're seeing an issue with custom themes and checkboxes, make sure you add the out-of-the-box Colors UX Style to your theme. You can leave the order and Type of Core the same, this will resolve the issue.

Valawman
Tera Contributor

The color generator site is unavailable.  Anyone know of its status or if there is an alternative source?

 

ColorGeneratorMessage.jpg

 

Victor Peinado
Kilo Guru

The color generator site is unavailable.  Anyone know of its status or if there is an alternative source?

 

I used it a few times and today, like a kid outside a closed candy store, OPEN OPEN OPEN

https://theme.deoprototypes.com/color-generator-p/

 

Sad day when that disappeared

Robert Fauver
Tera Contributor

@Valawman & @Victor Peinado it's behind the SN firewall. There might be some chatting about it during the Next Experience Theming Academy on 01/18.

 

https://www.servicenow.com/community/next-experience-events/next-experience-academy-session-6-introd...

Victor Peinado
Kilo Guru

@Robert Fauver  Woot Woot cant wait for that. i was lucky enough to use it once for the main theme but folks have an appetite for more 🙂

ChrisUSC84
Tera Contributor

Has anyone figured out how to change the global search default color?  It appears to be a variant of "--now-color--primary-1", but I would like to keep that as is.

 

SN.png

mattystern
Kilo Sage

@ChrisUSC84

It looks like these are using (in Tokyo) the following properties:

For the shading: --now-color_chrome--brand-4

For the border: --now-color_chrome-divider-1

There's also a hover color but I am having trouble finding it...

Once you click into the box, it looks like it uses: --now-color_brand-neutral & sets the property background: transparent.

 

Hope this helps!

MGOPW
ServiceNow Employee
ServiceNow Employee

@Valawman @Victor Peinado @Robert Fauver 

 

Hello! Just wanted to let you know that the theming website is back: https://theme.deoprototypes.com/color-generator-algo-v1

 

Enjoy!

fauverism
Tera Guru
Tera Guru

@MGOPW This is AWESOME! Thanks for letting me know!

Community Alums
Not applicable

@Ashley Snyder : Thank you for the above valuable content. Could you please help me with below issue.

 

I want to change the polaris view header color to while and I have achieved it using the property below

  "properties": {

    "--now-unified-nav_header--background-color": "color code of white"

}

 

But the problem is, the font colors on header menus are white and I have changed the header to white color. Because of this header menu options are not visible properly. Is there any property where I can change the font colors of header menu option. Please provide your inputs on this. Thank You in advance. 

 

Regards,

Ganesh

mattystern
Kilo Sage

@Srikanth Menava 

We had the same issue when we upgraded to Tokyo. See this thread on a solution I had stumbled upon.

-Matt

Srikanth Menava
Tera Guru

Hi Matt,

I figured out my self the same, I thought I am fast enough to delete my comment, But I'm not.

Thanks for the quick response tho.. 

Ashley Snyder
ServiceNow Employee
ServiceNow Employee

This article has been updated to reflect the changes for the Utah release. It serves to provide an overview of Next Experience UI theming, the differences in whether Next Experience is enabled or not, and the tools available for theming per the family version you are on. If you have technical questions on how to theme I suggest creating a question in the forum, as this post will not be moderated for deep dives or technical issues. If you think you have a defect with theming based upon our solutions, we recommend creating a support case.

James Bustard
Kilo Sage

Does anyone know how to change the order of the themes presented to us in preferences?


The question was asked further up, but no one replied. I'm struggling to find the answer anywhere else online. 

 

JamesBustard_0-1679276258852.png

 

NFGDom
Tera Guru

@James Bustard I had opened a support ticket for this. The response that I got was "it is not possible at this time" and to open an idea on the idea portal. If there is a workaround, I'm not aware of it at the moment.

Dom

Srikanth Menava
Tera Guru

@James Bustard I am nnot tryig to contradict @NFGDom 's answer. But from personal experience, changing the order changes the visibility.

Theme Managemennt>> themes >> polaris

SrikanthMenava_0-1679322478119.png

and the result is 

SrikanthMenava_1-1679322560179.png

 

Version history
Last update:
‎03-22-2023 06:15 AM
Updated by:
Contributors