Quick Theming for the Next Experience

This article goes over the high points of creating user-selectable themes when San Diego’s Next Experience is enabled.   While this mostly covers color selection for themes, it should relate to other theme style properties as well.  See ServiceNow documentation for more detail.

You can also use this information to create variant styles (which will show as theme selections for users) within the default “Polaris” theme, skipping steps 1 and 4 below.

Note: San Diego patch 1 or later is needed for all of these steps to work.

Workspaces:  The author experienced mixed success with this method in workspaces.  At times, such as on longer page loads, the workspace UI would go back to the Polaris default, and the preferred theme would have to be chosen again by deselecting and then reselecting it in the Theme preferences.

Create a new Theme

Now Experience Framework > Themes > Theme Management > Themes

(FYI, one of the themes listed is “Polaris”, which is the default theme for the Next Experience.  We are going to override that in a later step.)

  • Click “New”.
  • Give it a name and click “Save”

Make a JSON color scheme with this handy tool

This is apparently maintained by ServiceNow:

  • https://theme.deoprototypes.com/color-generator-p/
    • Click “Auto Generate” (quickest method)
    • Then select 3 main colors.  Color ranges will be derived from these.
    • Click “Generate”
    • Make adjustments as needed on the next page.  (I like to change the Link and Focus to a different color base, for instance.)
    • Click “Copy JSON” to put the code into your clipboard.

Create a new Style record for the new Theme.

Back on the new Theme record, you created, on the “Compositional: App Theme” related list, click on “Style” and click its magnifying glass.

  • In its pop-up window, click “New” to create a new style in the sys_ux_style table.
  • Name the entry
    • Type = “Core” for this one (since it will be the default)
    • Fill in the Style field by pasting in the JSON from the color generator in between this code, after “properties”: and before the closing bracket:

{

      “properties”:

….. JSON from generator pasted here …….

}

NOTE:  The code must be properly formatted for JSON, or a blank page with no frame will be shown if this record is used.

  • Save the Style.
  • Back on the Theme record, insert a new row with the Style you created, with a Type of “Core”.
    • Save the Theme.
  • Get the sys_id of the theme to prepare for the next step.

Create a system property entry for the custom theme

This will make the theme’s “core” style become the default for all users.

  • On the sys_properties list, open a new entry

Name = glide.ui.polaris.theme.custom

Value = sys_id copied from the Theme record

  • Click Save

Refresh your browser

After refreshing your browser, the system should use the new theme instead of the Polaris theme because of the system property that was added.

  • You may notice that there is no Theme selection visible in the Preferences.  This is because at this point there is only one Style listed in the new Theme.
  • To provide theme selections for users:  Add other styles to your theme, but as Type = “Variant”.  Do not forget to save the Theme record after you have added Style entries to it.  You can also add existing variants to your theme, such as the Dark variant.  (Note: The Dark theme only works when the system property “glide.ui.polaris.dark_themes_enabled” is set to “true”.)
  • The Theme selection should then appear under Preferences, and your default and variant should appear as theme selections.  You can add multiple variants.

BONUS INFORMATION:

There are other properties you can set up.   For instance, if you want to hide the wavy background pattern used by Polaris, add this to the JSON properties of your style:

“–now-unified-nav_menu–background-image-alpha”: “0”

Don’t forget that if you add this as done below, you’ll need to add a comma at the end of the previous line.

Before (with pattern showing):

After (with pattern hidden):

That’s all for this article.  Happy Theming!