UI Builder - Themes & CSS

[Chris Pearson]

Disclaimer: The ideas, thoughts, and opinions in this post reflect my own views and do not necessarily represent the views of my employer, Accenture. 

UI Builder takes advantage of Theme records which can be nested under other existing Theme records. In these themes you can define Experience-wide CSS to be applied. This is where we can lay down color palettes, fonts, font sizes, button characteristics, or any other style we want to associate to existing ServiceNow CSS Hooks. Here's a partial example of what this can look like: 

{  
  "--now-canvas-toolbar-button--color--focus": "0,122,98",  
  "--now-text-link--primary--color": "0,122,98", 
  "canvas-toolbar-button--color-is-selected" : "0,122,98",
  "--now-color_focus-ring":"0,0,0,opacity:0.9",
  "--now-color--neutral-1": "246,247,247",  
  "--now-color--focus-1": "227,244,237", 
  "--now-line-height-crop--before": "-0.2125em",
  "--now-line-height-crop--after": "-0.275em",
  "--now-font-family": "Roboto, sans-serif",
  "--now-color--primary-0": "227,244,237",
  "--now-color--primary-1": "227,244,237",
  "--now-color--primary-2": "0,122,98",
  "--now-color--primary-3": "34,54,56",
  "--now-color--secondary-0": "227,244,237",
  "--now-color--secondary-1": "0,122,98",
  "--now-color--secondary-2": "0,59,49",
  "--now-color--secondary-3": "34,54,56",
  "--now-color--neutral-15": "126,139,141",
  "--now-color--link-1": "1,119,142",
  "--now-button--border-radius": "5px",
  "--now-button--border-width": "1px",
  "--now-button--font-weight": "500",
  "--now-button--height-scale": "1",
  "--now-button--primary--color": "255,255,255",  
  "--now-button--primary--color--hover": "255,255,255",
  "--now-button--primary--color--active": "255,255,255"
}

Ok, that's pretty cool, but how would I know and remember all of those SN CSS hooks? This URL is invaluable when creating Experiences with UI Builder. https://theme.deoprototypes.com/hooks/ 

Here, we can search and browse through all of the ServiceNow hooks used in UIB Experiences to find the correct one to use in our Themes. We can even see the default value of the hooks. 

Once we have laid down our specific Experience CSS, we can take things further by controlling specific CSS which only applies to each individual component from inside UI Builder.  

With these two methods of inserting custom CSS into your Experiences you'll be well on your way to building incredibly beautiful and engaging UI's on the NOW platform!