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! 

[michaelmcaliste]

Thanks for the great resource. Quick question, how do I find out which CSS hooks apply to which elements on a page. If I inspect HTML of a page I don't see hooks being used at all.

[jsanjuan]

https://docs.servicenow.com/bundle/quebec-application-development/page/administer/ui-builder/concept/work-themes.html

[Chris Pearson]

That's a great observation and I'm sorry I didn't see this comment until now! 

UIB Experiences use 'shadow-dom' which is just a cool way to say that the styles are computed, so when you inspect them, you see a bunch of garbled coded styles. This makes for a more difficult inspection of your handy-work, but in the end, a more resilient product from ServiceNow.

When you inspect an element, you might see something like this...

And then you ask yourself, 'What the heck is --mv9-kWzzvm--XZATrZO--krJUfZvWmp-JvjvZ'?

That's the shadow-dom part. But there's a cool utility that will help you figure out what that means.

Bookmark the decoder site:  https://theme.deoprototypes.com/decoder/

Then paste your garbled nonsense into that decoder to reveal the actual ServiceNow theme hook:

--now-button--primary--background-color

Once you know the theme hook in question, you can navigate back to your theme records and modify them as you need to.

[Chris Pearson]

That's a great observation and I'm sorry I didn't see this comment until now! 

UIB Experiences use 'shadow-dom' which is just a cool way to say that the styles are computed, so when you inspect them, you see a bunch of garbled coded styles. This makes for a more difficult inspection of your handy-work, but in the end, a more resilient product from ServiceNow.

When you inspect an element, you might see something like this...

And then you ask yourself, 'What the heck is --mv9-kWzzvm--XZATrZO--krJUfZvWmp-JvjvZ'?

That's the shadow-dom part. But there's a cool utility that will help you figure out what that means.

Bookmark the decoder site:  https://theme.deoprototypes.com/decoder/

Then paste your garbled nonsense into that decoder to reveal the actual ServiceNow theme hook:

--now-button--primary--background-color

Once you know the theme hook in question, you can navigate back to your theme records and modify them as you need to.

[Jan15]

Thanks for the very useful tips.

Is there a way to easily address a specific element within a component without the need of modifying the theme? For example change the style of the header (.sn-section-header-content) on a "Form - fields" component but only for that instance of the component.

[Chris Pearson]

There is! Each component has a section which allows you to add custom CSS (which applies just to that component) which would override the default styles you lay down in your theme records.

[User492770]

Hi, Im interested, what do you look at in the inspector to get this garbled coded values (cannot see the picture you posted). Im trying to find out how to change a color of data visualization component via template. I have posted a question about the same topic:  https://community.servicenow.com/community?id=community_question&sys_id=840a7ad91bce055438739979b04bcb05

[Lo_c Guzzetta]

I may miss understand what you mean. In order to update a component render, most of the time, the main things we are able to override are the servicenow hooks. One simple example, if you try to overrides column's color of a specific List component in your view, it won't work. 

Those limitations are documented :

The only classic css you could apply on your page would work on containers (padding, borders, colors mostly) and text decoration. All other components (lists, date and others), you won't be able to change anything without SN CSS properties (which are close to zero for the lists components on quebec for instance).