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.