FYI: This article has not been updated or reviewed since the Tokyo release. Use at your discretion, but be advised that these methods may or may not work on later releases.
If you've been working in ServiceNow for a while, then you know it's traditionally been best practice to theme each of your sub-production instances with it's own colors. It's common to have multiple ServiceNow sub-production instances. For example, you may have sub-development, development, and test instances. To make sure users don't confuse one ServiceNow instance for another and carry out tasks in the wrong one, use visual elements to clearly distinguish all your instances from one another.
This article will walk you through how to create a theme for each instance, each with its own Core or default style that applies to the instance. Before proceeding make sure you have the following system properties set to true:
- glide.ui.polaris.experience
- glide.ui.polaris.dark_themes_enabled - To re-use the Polaris dark variant in this theme
There are multiple ways to accomplish a goal in ServiceNow, and how your team decides to theme and retain their instances may be different from the steps in this article. This article was written with the assumptions that users create themes in Dev, manage themes with a system property, do not alter theme records outside of the Dev instance, and migrate changes in themes up through the instance stack.
Step 1. Learn how to create a theme
Next, head over to this article to learn how to create your first Next Experience UI theme. This article walks you through creating a theme, with a Core style and Variant styles. Let's discuss this for a moment. The Core style is what will apply to your instance upon login, so this is how you'll apply default coloring to your instances. Variant styles are user selectable styles, which work the same way as UI16, if you want to use colors other than the default colors you can go into your user preferences and select them. At the end of this article you should understand how to create a theme with your Core style and Variants and override the default Polaris theme.
Step 2. Create themes for each instance
Each instance will need its own Core or default variant. The great thing is that Styles can be re-used and applied to multiple themes, so you don't have to re-create your variants for each theme, you'll only need to decide what the Core style will be. You cannot flip a Variant style to Core, as it will will change the type for all themes, so if you want a variant style to be the core style for your theme, create a new style for it and set it to Core.
In this example there are 3 themes:
Production
In this theme, the core or default style is Production Default, with some user selectable variants. Note: The Polaris Dark variant was re-used in this theme and does inherit some of the Core style, but will retain some of the Polaris styling as well. There is a Dark toggle in the Color Generator you can use to create a Dark mode for your colors, be advised that not all colors work with Dark mode and to test your Dark mode variant thoroughly.
Test
For this theme, you can perform Insert and Stay on a variant. In this example the Black & White variant was used and named Test Default, and set the type to Core. The style was associated to the Test Theme and removed Black & White variant from this theme.
Dev
Similar steps as the Test Theme. Create a new Core style, or perform an Insert and Stay on a variant to use, name the style and set the type to Core, associate it to the theme, and remove the variant if you used it.
Within each theme same variants were added for all three themes, unless they were used as the default style. The Typography and UI16 Dashboard Visualization Compatibility styles from the default Polaris theme were also re-used to prevent creating new font and dashboard styles.
Note: You could manage the Core and Variant types in one theme to meet your needs in each instance and create data preservers for the UX Theme and UX Theme Style records during your clones. If you go this route ensure you understand the technical debt for managing each theme in your instance appropriately.
You could also use a global user preference to set a variant of a theme for all users when they log in, keep in mind the admin team assumes the technical debt of ensuring the glide.ui.polaris.theme.variant does not exist more than once as a global user preference, the global user preference is not deleted, and the sys_id for the variant style in the global user preference exists in the instance.
Step 3. Override the default theme for your instance
This is covered in the article on how to create your first Next Experience UI theme, but for recap, we're going to set each of our instances to the specific theme we created for it. Note: To use this method you must be on San Diego Patch 1 or higher. To do this, in each of your instances:
1. Copy the UX Theme sys_id you wish to use by right clicking the header and selecting Copy sys_id.
2. In the Application Navigator navigate to sys_properties.list.
3. If you haven't already, create a system property named: glide.ui.polaris.theme.custom with the Type of string.
4. Enter your copied sys_id into the Value field.
5. Save the record.
Step 4. Move your Themes and Styles to Production
Now that you've created the themes you need for each instance, migrate them up to Production so they are replicated to sub-production instances in clones. Ensure that each of your instances has the system property set in Step 3 set to their unique sys_ids.
Step 5. Create a Data Preserver for your System Property
In order to preserve the theme set for each instance during clones, we're going to create a Data Preserver similar to how UI16 themes are retained after clones. In order to do this navigate to System Clone > Preserve Data and click New.
1. In the name field, give the Data Preserver a unique name such as Next Experience Theme Properties.
2. Set the Theme checkbox to true.
3. Set the Table as System Property [sys_properties].
4. In the conditions field build the following:
Name is glide.ui.polaris.theme.custom
5. Click Submit.
Once you have saved the record, you'll see the Clone Profiles related list. Click Edit, and your Clone Profile if you have one, if not you can leave this blank as you are not required to use Clone Profiles.
