Skip to main content

Best Properties, Next Experience (Polaris) Themes Part 5

· 5 min read
Eric Riemer
ServiceNow Wizard

This is Part 5. You should start with Part 1.

Here are some of the best properties I have found to set

There are obviously a lot of properties available. I have found that setting some have much more impact than others. Here are the top ones that I think can make a difference.

Set "--now-unified-nav_menu--background-image-alpha": "0" to get rid of the slight "camo" pattern that shows up in the menus.

Fonts

If you decide not to use the default fonts and want to use your own: --now-font-family is the css font stack to use (with font fallbacks just like in CSS) If you change that setting you are also going to want to add these:

"--now-display-type--header-primary--font-family": "--now-font-family",
"--now-display-type--header-secondary--font-family": "--now-font-family",
"--now-display-type--header-tertiary--font-family": "--now-font-family"

If you don't do that then your fonts will be inconsistant and Lato will keep showing up.

Icons on the top right

To change the color of the ring around the icons (i.e. the scope picker has a red ring by default if you aren't in Global) --now-unified-nav_nav-menu-trigger--border-color--active

Header Border

There is a very thin border that is at the bottom of the header. By default this isn't colored differently than the header, but I think it can (when used carefully) add a nice touch. The color is set with --now-unified-nav_header--border-color and the thickness is set with --now-unified-nav_header--border-size.

DataViz colors

I have teased that these are weird. Here is my best shot at explaining...

First, these are the colors used for charts such as the default Admin Home page and any charts made with the Platform Analytics Workspace. Othere charts such as on the SOW landing page get their colors from elsewhere.

If you use the browsers dev tools to inspect the chart you will see a hard coded value. If you are using the default theme you might see fill: rgb(10, 184, 219); for the first element. If you go and look for that color in the theme records you won't find it.

So what gives?

Here is my best guess: The first element is --now-datavis_color--qualitative-0 which is mapped to --now-datavis_color--blue-5. I am sure that this is true because I can re-map the qualitative colors to change what color is displayed.

If we look it up in the style record we will find "--now-datavis_color--blue-5": "10,184,217" which is not the same as 10, 184, 219.

What I think is happening is that the RGB value is being converted to a HSL color and then back to RGB. Using the w3schools Color Converter rgb(10, 184, 217) is the same as hsl(190, 91%, 45%) which is the same as rgb(10, 184, 219). Why is it working this way? I have no idea.

For those who are interested and don't know about color spaces:

RGB stands for Red Green Blue. If you look really really closely at any modern screen you will see that each pixel is actually made of tiny lights that are red, green, and blue. Each one can hold a value from 0-255, and those make up how much of each color to use to make up a pixel. There are about 16.5 million colors that can be defined this way.

In the real world there are more colors than can be described on the RGB spectrum, and there is a very good chance that the screen you are reading this on can display colors outside the RGB spectrum.

HSL stands for Hue Saturation Lightness. These are a Hue as a number 0-360, and Saturation and Lightness as either 0%-100% or from 0-1.

RGB is typically represented as a cube and HSL as a cylinder. RGB colors are great for computers to understand, but HSL was meant to be more human understandable.

Aside: There are other color spaces that are "better" like LCH and OKLCH, but SN themes don't support them. They also don't support expanded color gamuts. It would be pretty cool if they did in the future.

Scrollbar colors

It doesn't work on all scrollbars, but --now-unified-nav_menu-scrollbar--color is a really fun bonus touch of color to add.

Checkboxes

I expect this one to get fixed at some point, but Read only checkboxes are tough to read with the default theme. --now-checkbox_icon--color--readonly and "--now-checkbox--background-color--checked_readonly will help with that.

Login page

This won't look great 100% of the time, but is a good starting place for the login page

"--now-login--background-color": "--now-color_chrome--brand-10",
"--now-login_mountain--primary--fill-color": "--now-color--secondary-1",
"--now-login_mountain--secondary--fill-color": "--now-color--primary-1",
"--now-login_mountain--secondary--stroke-color": ""--now-login_mountain--secondary--fill-color"

You can also turn off the background images by (adding and) setting the system property glide.ui.polaris.login.show_illustrations to false

Bonus: System Properties

System properties, that are useful to go with themes.

You can (as of Vancouver) resize the logo on the login screen. Add a property glide.ui.polaris.login.logo.height and set the value to the css height you want.

Theme Builder includes the property glide.ui.polaris.theme_builder.override_logo, but you don't need it installed to use it. setting this to true will tell ServiceNow to use the theme asset header logo. This is particularly cool (in my opinion) to set header logs per-variant.

Series

Part 1

Part 2

Part 3

Part 4

Part 5 <-- you are here

Part 6

Part 7