Next Experience UI Theming Overview

[Ashley Snyder]

 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 Enabled San Diego/Tokyo Utah Next Experience UI Disabled Portal experiences and custom experiences Agent Workspace Theming FAQ

---

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.

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.

 

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.

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.

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:

• Create a custom theme
• Extend a theme
• Add Next Experience font and image assets

---

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:

• Create a custom theme
• Extend a theme
• Add Next Experience font and image assets

---

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.

 

[NFGDom]

@Srikanth Menava good to know! I'm sadly unable to replicate this when I change the order of the UX Theme Styles.

[Community Alums]

@Srikanth Menava(@NFGDom), I appreciate your response. Unfortunately, I have already tried that, and it doesn't seem to dictate the order in the theme selector 

Even in the picture you sent, the order seems off. You have the order set as 'Green, Red, Blue, Purple', then in the screenshot, they show 'Green, Blue, Red, Purple'. 

The Service Now docs say the order field you referenced "specifies when the style is applied. The higher the order, the greater its priority is." It doesn't mention the order shown in the theme selector here either. 

Maybe your experience is by coincidence? If you change your order now, does it change it in the selector? 

[MGOPW]

Hello! Just wanted to let y'all know that as of this moment, there is no way to set the order for themes within the variant picker. I have forwarded this piece of feedback to the appropriate channel, but I would definitely encourage you to submit an Idea on the Idea Portal or vote for one if it already exists. 

[L B]

Is it possible to do a split header in Tokyo where LOGO and search field in one, and the rest of menu items in the other?  Like this:

[MGOPW]

@L B - You are not able to do that with the Next Experience. 

[c_d_mitchell]

Can the background color of the Navigator be changed?   In UTAH?
Client is wanting something other than white. 

Thanks.

[MGOPW]

@c_d_mitchell - Yes, you should be able to inspect the menu and find the variable for the menu color background in the developer tools. You cannot change this from Theme Builder, instead, you'd have to edit the theme JSON directly and add the property there. Note: once you edit the JSON directly, you cannot make changes to this theme from Theme Builder. 

I go over how to do this type of development during this Live Coding Happy Hour. There are also other documents on how to edit the JSON in the Next Experience COE. https://nxtxp.link/coe 

[Amanda Grugan]

My concern is how the slightly different shades of blue for invalid/inactive values versus a link to a record will look for colorblind people. My husband is colorblind and when I showed him an example, he isn't able to determine which is which. Does anyone know if there is a way to modify either of these so the platform is more accessible for colorblind individuals? It was not an issue in the Classic Environment since links to records were underlined instead of colored. And, yes, I am having my team actively work on correcting invalid values as they are identified, but the issue still remains that identification of the difference of those versus hyperlinks is not friendly to those with colorblindness. Thanks.

[Gurpreet07]

Hi All,

Anybody knows how to change dropdown option background color? It always dark blue.

Regards,

Gurpreet

[Robert Fauver]

@Gurpreet07 That is a Computer System setting. No applicable to ServiceNow.

[Pablo Sanz]

Does anyone know how to change the colors and logo in the Service Operation Workspace if the Next Experience UI is disabled? I can't find a way to make these changes.

[RubenFuertes]

Hi @Pablo Sanz,

Open a ticket to ServiceNow to confirm it but I am afraid that No Next Experience No party in this case.

[Ashit1]

Hello, can someone help in changing the color of placeholder and the 2 icons in the Global search, I was able to change the background color but can't find a way to change the other elements color.

[Victor Peinado]

woohooo the Theming site is back woot woot! now where did i put those extra themes i wanted 🙂

[Community Alums]

Hi guys,

How to change the favorite popup background-color?

Mine is all white and I'm trying to change it but I couldn't find where to configure these colors

[WORKFLOW-COWBOY]

I am still in search for a way to sort the User Theme Preferences if anyone has an idea. 

https://www.servicenow.com/community/next-experience-forum/sort-themes-in-user-preferences/td-p/2968...

[rogerburns]

We have been limited because theme builder relies on the Admin role to implement.  To be clear, UI Builder does not, and has it's own roles.  Admin is necessary only for high level function, security, performance, etc.  It should be required to install the theme builder plugins, but after that, it should not be necessary.  I feel like this app was built by someone with admin, and never tried it in a federated environment where your developers and builders have a separate responsibility from your system admins.  I've tried entering in an idea, and voted in another, but some limitation on the ideation pages is keeping them from posting comments. 

Please give theme builders a dedicated, non-Admin role, so that they can address the non-compliant accessibility issues introduced with Next UI.  

thanks!