Now Experience Workspace Themes



This post highlights UX Themes in Now Experience Workspaces. UX Themes can be used in Portal Experiences as well, and have some different CSS properties. I'll go ahead and make the distinction that while you can set a logo and two brand colors in Agent Workspace, that's the extent of the 'theming' that can be done within that Workspace type. This post is not extensive as I'm sure there's more than can be done with themes, and there's a lot of great content posted on this already on the Developer Blog, Product Documentation, and the Community.


Themes


ServiceNow has some starter themes to use for both Portal and Workspace experiences. There is a Default theme that the Start Workspace Theme extends and gets its properties from there. Even if you don't extend the Default theme, your experience will use the properties from it from what I've seen, so the properties set in the Default theme must be set in hooks somewhere. Themes use CSS properties stored in a JSON object. I would definitely recommend documenting the properties being used, as commenting is not supported in JSON. The ServiceNow Developer Blog has a great article in which they mention how to create a test page to view how your theme is impacting your experience. I would also recommend reading the section on theming hooks and how they apply to components versus styling within the container of a component itself.


Nord


I stumbled across the Nord theme when looking around for this blog and really like it. It's simple and I find meets most of my needs. In my PDI I've created a re-usable UX Theme named 'Nord' and setup the CSS properties with the same naming scheme that Nord uses itself, i.e. --nord0, etc. so when I look at their documentation I can quickly pinpoint the color I'm using since UX Themes in ServiceNow use RGB instead of Hex codes. Here's the UX Theme JSON variable:


{
    "--nord0": "46,52,64",
    "--nord1": "59,66,82",
    "--nord2": "67,76,94",
    "--nord3": "76,86,106",
    "--nord4": "216,222,233",
    "--nord5": "229,233,240",
    "--nord6": "236,239,244",
    "--nord7": "143,188,187",
    "--nord8": "136,192,208",
    "--nord9": "129,161,193",
    "--nord10": "94,129,172",
    "--nord11": "191,97,106",
    "--nord12": "208,135,112",
    "--nord13": "235,203,139",
    "--nord14": "163,190,140",
    "--nord15": "180,142,173"
}



Workspace Experience Theme


Now that I have some reusable CSS properties set up, I can create a specific theme for my Workspace. Keep in mind, you don't have to create a theme for every Workspace experience you create, you can re-use a theme even if it's not in the same app scope. I would suggest creating a theme that aligns with your organization's brand guidelines and either re-use it across Now Experience Workspaces, or reference the properties needed from that theme and tweak it in a specific Now Experience Workspace theme based upon your needs.


In order to use the Nord theme I created above, I have to select it in the Extends field. You can only extend one theme at a time, with the exception being the Default theme as I mentioned earlier has CSS properties that are being used even when other themes aren't extending from it. If you want to override the Default theme, you either need to override the CSS property from it in the theme you're extending from, or in the theme you're creating.


This was made a lot easier by looking at Chris Pearson's community post due to linking the CSS Hooks that ServiceNow uses itself (which is pure gold and deserves a spot on your Bookmarks Bar), so I can quickly identify which colors they're using for their CSS properties before deciding to change them myself.


I didn't go too down the wormhole for this since it's just a POC and basically me playing around and documenting, but if you poke around you can see there's a lot of CSS properties contained in the Default UX Theme for Workspaces. If you need a good template to work off of so to speak, check out the Time Off Template in App Engine Studio as a custom theme has been created there by ServiceNow and can be used as a jumping off/learning example.


In some of the alerts, I wanted the colors to be somewhat lighter than the Nord theme colors, so instead of putting them in that theme, I created my own CSS properties and plugged in the RGB triplets for them. This is an example of overwriting CSS properties that exist in the Default theme with specific ones in your own theme.


  "--now-color_alert--critical-0": "213,151,157",
  "--now-color_alert--positive-0": "189,208,173",
  "--now-color_alert--high-0": "239,213,161",
  "--now-color_alert--low-0": "216,222,233",
  "--now-color_alert--info-0": "146,174,201"

Here's what I have so far, some things I changed, some things I left the same from what I copied from the Time off ws theme. You can see how you can spend some time going down the wormhole on these so it makes sense to have a 'master' or brand theme for your instance and create and extend from that theme if tweaks need to be made for specific experiences rather than trying to plugin CSS properties in each theme.


{
  "--now-font-family": "Open Sans, sans-serif",
  "--now-button--border-radius": "25px",
  "--now-button--primary--background-color": "--nord10",
  "--now-button--primary--border-color": "--nord10",
  "--now-button--primary--background-color--hover": "--nord3",
  "--now-button--secondary--background-color": "255,255,255",
  "--now-button--secondary--border-color": "0,48,89",
  "--now-button--secondary--border-color--hover": "2px",
  "--now-button--secondary--background-color--hover": "--nord8",
  "--now-button--tertiary--background-color": "255,255,255",
  "--now-button--tertiary--border-color": "0,48,89",
  "--now-button--tertiary--border-color--hover": "2px",
  "--now-button--tertiary--background-color--hover": "--nord5",
  "--now-color--neutral-4": "--nord5",
  "--now-color--neutral-5": "--nord5",
  "--now-color--secondary-1": "--nord8",
  "--now-color--primary-0": "--nord4",
  "--now-color--primary-1": "--nord3",
  "--now-color--primary-2": "0,48,89",
  "--now-canvas-header-container-ws--background-color": "--nord10",
  "--now-tabs--background-color": "--nord4",
  "--now-tabs--border-color": "0,0,0",
  "--now-color--neutral-2": "246,247,247",
  "canvas-toolbar--background-color": "--nord8",
  "canvas-toolbar-button--background-color--focus": "--nord10",
  "canvas-toolbar-button--background-color": "--nord10",
  "now-color--neutral-7": "160,160,160",
  "--now-tabs--border-left-radius": "0px",
  "now-color--primary-1": "0,0,0",
  "--now-split-button_divider--width": "0px",
  "sn-filter-panel-button-md--border-color": "255,255,255",
  "--now-color--secondary-0": "209,217,223",
  "--now-heading--header-primary--font-family": "Open Sans",
      "--now-heading--header-primary--font-weight": "700",
  "--now-color--neutral-1": "255,255,255",
  "--now-canvas-nav-item--default--color": "--now-color--neutral-4",
  "--now-canvas-nav-item--default--color--hover": "--now-color--neutral-4",
  "--now-canvas-nav-item--default--color--active": "--now-color--neutral-4",
  "--now-line-height-crop--before": "-0.2125em",
  "--now-line-height-crop--after": "-0.275em",
  "--now-badge--secondary_low--background-color": "217,217,217",
  "--now-color_alert--critical-0": "213,151,157",
  "--now-color_alert--positive-0": "189,208,173",
  "--now-color_alert--high-0": "239,213,161",
  "--now-color_alert--low-0": "216,222,233",
  "--now-color_alert--info-0": "146,174,201",
  "--now-color--secondary-2": "--nord3",
  "--mv9-Jrmsr1-8trptZ-jvfv--18vZz--8tAf8z": "2.2rem"
}


Logo


In order to change the logo and/or fonts, a UX Theme Asset needs to be associated to the UX Theme record itself. For this blog I created a new asset with my .png file called 'bep_logo' (for Blog Experience Playground) and assigned it the asset properties: {"position": "header_logo"} in order for it to fill the position of the logo.


Shout out to Brad Tilton and Aashish Atrey on the SNDevs Slack for finding out about how to change a logo height with the CSS property:

"--mv9-Jrmsr1-8trptZ-jvfv--18vZz--8tAf8z": "2.2rem"

Fonts


Same as above, fonts can be imported into an experience via a UX Theme Asset. For my theme I re-used the Open Sans font already loaded into the Assets table, but you can load your own by creating a new entry in sys_ux_theme_asset and attaching the .woff/.woff2 file to the record. Once the asset has been created, associated it to your UX Theme via the UX Theme Asset related list, and reference it where needed within your CSS properties within the theme.



Tying it together


Using the Test page I mentioned above, I'm able to change my CSS properties and view how it would look in real time.







Resources


ServiceNow Community: UI Builder - Themes & CSS

ServiceNow Product Documentation: Work with themes

ServiceNow Product Documentation: Create a custom theme

ServiceNow Product Documentation: Extend a theme

ServiceNow Product Documentation: Apply a theme to your experience

286 views0 comments

Recent Posts

See All