This guide has been updated for the Utah release to include our latest product for creating a core theme - Theme Builder.
Create a Theme with Theme Builder (Utah+)
Manual Theme Creation (Tokyo/San Diego)
Create a Theme with Theme Builder (Utah+)
If you're on Utah+ then head over to the Theme Builder product documentation and watch our Creator Toolbox and Academy on how to create a theme with Theme Builder. Theme Builder is a Store download that can be downloaded on your Utah instance and Utah PDI.
As a quick overview, Theme Builder allows your to manage, edit, and implement Next Experience themes easily. You can use Theme Builder to create your core brand theme, and then add variants manually by updating the style record.
Theme Builder enables you to quickly perform the following in a matter of clicks:
- Define branding colors
- Preview branding colors on multiple experiences
- Choose a font
- Upload a logo
- Define visual elements such as rounded corners
Manual Theme Creation (San Diego/Tokyo)
This portion will walk you through setting up a core theme in San Diego/Tokyo. This guide will only cover some basic color elements, and will not extend into changing fonts, shape and form, classic dashboard styling, logo, etc. For questions on setting your company logo, see the product documentation.
Step 1. Create a Theme
It is best practice to create a new theme, and override the default shipped Polaris theme rather than adding styles on to the Polaris theme. To create a theme navigate to Now Experience Framework > Theme Management > Themes. From here, click the New button to create a new theme.
The only mandatory field here is Name, and you can name the theme whatever you'd like to denote that it's your organization's theme. I'll use Company Theme as a name for this theme.
Step 2. Create a Core Color Style and re-use OOTB Styles
Note: As of Tokyo Patch 1 (you can also use this method in San Diego), it's important to include the Colors UX Style into your theme to prevent issues with checkbox styling. You can add it to your theme, leave the order as 0 and the type as Core. If you want this as a user selectable variant, you'll have to create a duplicate copy of the UX Style and add it in as a variant.
Since we're creating a Next Experience UI theme, we're going to work with the Compositional: App Theme UX Theme Styles records. The Legacy: Experience Theme tab can be used in the following scenarios: Portal and custom experiences regardless if Next Experience UI is enabled or not, and workspace experiences when Next Experience UI is not enabled. You'll notice when Next Experience is enabled that your Workspace theme cannot be edited in UI builder and is set to the Polaris theme by default, which we will override here.
Before we start defining our own colors, let's include some of the default styles from the Polaris theme so we can re-use them. The Polaris theme ships with styles for shape and form (i.e. corners, borders, etc.) fonts, Classic Dashboard styling, etc. This article is using the assumption that we want to re-use these and not change them, but you do have the option of creating your own style records for fonts, shape and form, etc.
On your UX Theme record, associate the following styles:
Now you're ready to create a UX Style for your company's colors. Let's begin by defining three colors you'll need to use:
1. Primary, in my example I'm going to use #666666, and use an online Hex to RGB converter to get the RBG value: 102, 102, 102
2. Secondary: #999999 with RBG: 153, 153, 153
3. Neutral: I'm going to use the same as my secondary, but this could be different.
Now we're going to create a UX Style that will override the default Colors style. You can give the UX Style a name, in my example Company Colors and a Type of Core. In the Style box, enter the following to change the theme:
{
"base": {
"--now-color--neutral": "153,153,153",
"--now-color--primary": "102,102,102",
"--now-color--secondary": "153,153,153",
"--now-color_chrome--brand": "102,102,102"
},
"properties": {
"--now-color_brand--neutral": "153,153,153",
"--now-color_brand--primary": "102,102,102",
"--now-color_brand--secondary": "153,153,153"
}
}
Note: You can also use this customer facing site to auto-generate a site based upon your three branding colors, but sure to include the copied JSON in braced such as:
{ "properties": [ENTER THE COPIED JSON HERE, IT WILL INCLUDE IT'S OWN BRACES]
}
Your UX Style should look like this:
In the UX Theme record, give your new UX Style an Order of 1 in order to override the Colors style, and allow anything not found in your UX Style variables to be picked up by the lower order Colors style.
Step 3. Override the Default Theme
Now that we have a Core style and a new theme, before we proceed to creating variants, let's test the theme and override the default Polaris theme. Note: To use this method you must be on San Diego Patch 1 or higher.
1. Copy the UX Theme sys_id by right clicking the header and selecting Copy sys_id.
2. In the Application Navigator navigate to sys_properties.list.
3. Create a new 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.
You'll notice your theme will load after saving, perform a browser refresh to get the full theme.
Step 4. Create a User Selectable Color Variant
You'll notice if you head over to User Preferences that the Themes panel is not visible, even though you have glide.ui.polaris.dark_themes_enabled set to true. This is because the theme itself does not contain a variant and in the absence of a variant associated to the Theme, that option will not show for users. Let's add a variant to our theme.
Navigate back to the theme you created in Step 1. Under Compositional: App theme, we're going to add a new row:
Applicability: Leave Blank
Order: 0
Type: Variant
Style: Create a new UX Style record with your desired colors and naming, in this example we're going to be using Greens:
{
"base": {
"--now-color--neutral": "127,175,92",
"--now-color--primary": "57,145,48",
"--now-color--secondary": "127,175,92",
"--now-color_chrome--brand": "57,145,48"
},
"properties": {
"--now-color_brand--neutral": "127,175,92",
"--now-color_brand--primary": "57,145,48",
"--now-color_brand--secondary": "127,175,92"
}
}
Note: You can also use this customer facing site to auto-generate a site based upon your three branding colors, but sure to include the copied JSON in braced such as:
{ "properties": [ENTER THE COPIED JSON HERE, IT WILL INCLUDE IT'S OWN BRACES]
}
Ensure the style is associated to your theme with the Type of Variant, it should look like the following:
Save the UX Theme record. Refresh the browser window, and now you'll see the Themes panel under User Preferences and your new variant.
Hopefully by the end of this guide you're more comfortable with creating a theme to override the default Polaris theme for Next Experience, and how to create a Core style and a user selectable Variant. While this article covered the basics, there's more you can do with Style applicability, adding fonts, logos, and more. See the product documentation to go deeper on theming and for more of a deep dive on when themes are applied and fundamentals of CSS variables, see our article on Next Experience UI Theming.
I set out to create a dark theme, and found that it was actually easier to create a dark theme that was a "light" theme as you have more control. Wth "isDark" property in the JSON set to true, some additional color inversions seem to occur that I wasn't sure how to control (or if it was even possible to control that).
I was quite hard work to keep track of all the CSS variables at play, and ended up documenting it as I went. This is for San Diego, though I've noted some differences for Tokyo. Hope it's of use to others.
Hello,
The override works as expected (Tokyo Patch 1), however what worries me is that I cannot assign the theme only to the Agent Workspace.
I am seeing exactly the error as shown on the screen when entering Branding and Theming in CSM Configurable Workspace: "Polaris is the default theme for your instance."
I would like to just extend the Polaris theme with few amendments I did in Legacy Workspace, specifically to the gradient bar on the left-hand side of Workspace. Is there really no way to do this outside of replacing the theme globally? This goes against company branding strategy.
Attaching the screenshot of what I mean.
On some of my variants, the tabs on the form are disappearing. Anyone else see this or know why? (Ignore the color pairs - just doing some testing.)
Default theme:
Variant:
I had to set my custom colors UX style to order 1 for it to be applied.
The color generator site is unavailable. Anyone know of its status or if there is an alternative source?
Some months ago I saw a youtube video in which you talked about the "Branding Manager" which should be available from the Tokyo Release.
Unfortunately I haven't found anything regarding the Branding Manager in the Store or on Docs.
This UI would be very helpful to make the branding easier.
Regards,
Roy
Bad news everyone. ServiceNow seems to have pulled the rug out from us all. Even though using the color generator is clearly listed as part of the theming instructions in this post, AND ALSO IN THE PRODUCT DOCS, they have apparently restricted access to only ServiceNow employees.
This is one of the most frustrating things ServiceNow has done. Make it way too hard to simply brand and configure the colors of your instance, then remove a required tool that made it slightly less painful.
Here's the response from the HI "support" case I created.
@Ashley Snyder
Has anyone figured out a way to change the text color for the global search?
Also, has anyone found a way to change the dashboard widget background colors? The customer likes the colors just not for the global search (too hard to read) or the dashboard widgets but I have found no way to modify this.
@Mike_R what you created is great! Does it only work for Utah+ though? My customer is on Tokyo.
Is there somewhere existing a color defintion for values that are not existing as choices (invalid data in field) ? Depending on your color theme or variant it is tough to read, stakeholders asking to mark it in red or orange.
