In San Diego and Tokyo release Themes are created manually. Basic theme used in the Next UI experience is called Polaris, and it needs to be replaced with a branded one.

Creating a custom user experience (UX) theme in ServiceNow is a great way to personalize your instance and make it stand out. In this article, we’ll walk you through the steps to create a custom UX theme in ServiceNow.

Prerequisites:

Before you start creating a custom UX theme, you should have a basic understanding of CSS and HTML. You will need to write CSS code to customize the various aspects of your theme.

Steps to Create Custom UX Themes:

1. Log in to your ServiceNow instance and navigate to the “System UI” module.
2. Click on the “Themes” module and then click the “New” button.

In the “New Theme” window, enter a name for your theme and select the base theme you want to customize or create a completely new one. In releases before Utah: you need to use “old” elements from Polaris theme (used in basic UX of Servicenow).

4. Once you have made the necessary changes, click on the “Save” button to save your theme.

5. To apply your custom theme, go to the “sys_properties” table and search for “glide.ui.polaris.theme.custom”. If this property does not exist, create one: as per values below:

Name: glide.ui.polaris.theme.custom
Type: String
Value: put here sys_id of your custom theme.

After reloading the page a new custom theme will be applied to your ServiceNow instance.
In releases before Utah themes need to be created manually. To replace OOTB colors. You need to add “old” UX theme style colors from Polaris theme, which is the basic theme for Next UI experience. In the screenshot below there are multiple themes added with different order. In this “m2m_theme_style” table order “0” represents OOTB themes which still can be used and overridden by themes with higher numbers.

Tips and Best Practices:

Test your custom theme thoroughly before applying it to your production instance.
Use descriptive names for your theme and its various components to make it easier to manage and update.

Base “Colors”, “Shape and Form” and “Typography” records in UX theme style table are named the same for various themes. You need to use sys ID to find proper one, from Polaris theme, please see list below:  

Colors (a197a38107b03010e03948f78ad30059)
Shape and Form (fc48238107b03010e03948f78ad30079) 
Typography (a60c45a507203010e03948f78ad300c0) 

Useful variable generator:
https://theme.deoprototypes.com/color-generator-algo-v1 - color generator and easy export to JSON

Explanation of Primary Secondary and neutral colors:

Primary  - color used most by your company to represent your brand. We will use your primary color in prominent parts of your interface, such as app navigation, menus, and other common components.
Secondary - supports the primary color. It provides an additional way to express your brand in ServiceNow experiences.
Neutral - used to develop the relationship between objects. We’ll use these for divider lines and surface containers.

ServiceNow engine will “use” previously declared colors in around 250 variables using different shades. So declaring as a primary color - dark green, as secondary color green, it’s not the best idea. As it makes particular areas illegible. 

ServiceNow uses many shades of the declared colors to customize your instance, which is why entirety is not always clear.

Creating a custom UX theme in ServiceNow can be a fun and rewarding project. By following the steps outlined in this article and adhering to best practices, you can create a unique and personalized theme that enhances the user experience in your ServiceNow instance.