Skip to main content

Washington DC, Next Experience (Polaris) Themes Part 6

· 4 min read
Eric Riemer
ServiceNow Wizard

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

Washington DC updates

This post is really late, sorry.

The big news in the W release is themable illustrations. But there are some issues I found with them.

Themable illustration

In my Retro theme collection I changed it to no longer map the the default Polaris illustrations. I very much like that the placeholder illustrations now match the theme that is in use. Banner images are not included in what gets theme colors (yet?), so this only impacts things like "no data to display" images. I think that what shows up by default is pretty bland, but it is a solid step in the right direction.

Out of the box, I dont think that these look particularly good in dark themes. Digging into the SVG image files (SVGs are almost shockingly human readable, especially if you have ever looked at a JPG in a text editor). There are two properties that you can use to override the default color mappings. By default these are:

"--now-illustration--main-illustration-fill": "--now-color--interactive-1",
"--now-illustration--main-illustration-stroke": "--now-color--interactive-3",

In a Dark mode I dont think that these look particularly good, at least not always. I think that a good starting point is:

"--now-illustration--main-illustration-fill": "--now-color--interactive-3",
"--now-illustration--main-illustration-stroke": "--now-color--interactive-4",

But this also depends on the colors you are using in your theme. The bigger issue I see is that there are parts of the images that are hard coded to other colors that are not themable. Hopefully that changes for Xanadu (along with the banner images).

Overriding the Illustrations

If you don't like the polaris images or the themable ones, you are in luck. the ability to upload your own image assets is now included and you can upload your own assets.

You can refer to the Polaris images /sys_ux_style.do?sys_id=eca0305507b03010e03948f78ad3009c if you want an idea of what you can upload and how to map them.

In order to make this work you need a new UX Style record, and to upload your svg files as related UX Theme Assets. Then you can build the properties:

"<property name>":"/uxta/<theme asset sys_id>.assetx"

Of note is also that for Polaris, the Header Logo is defined here, but is not included in the JSON properties (this is unchanged from previous releases, just interesting that it is handled differently).

Other Theme Changes

I have heard many times that NextUI themes should be forward and backward compatible. This means that if you have a color property that is for Washington included, the theme should still work in Vancouver. It also means that a theme that works in Vancouver should still work in Washington.

In general, I think that this basically works. Going forward, there are fallback color mappings and you should end up with colors that pretty much look correct. Going backwards you just have new properties that are ignored if nothing is using the properties.

I found it very interesting that when I took a look at the color mappings I set up from the base Polaris theme, there were quite a few properties that were set in Vancouver that were no longer present in Washington (in addition to the expected additional new properties added). I have no good way to check, but I am hoping that these were removed because nothing was ever using them.

There was also a pretty significant update to Theme Builder. The biggest thing is that you can get really granular with looking for accessibility issues, particularly with individual components. Unfortunately, all my thoughts about it mentioned in Part 1 still hold true. I find the limitations still outweigh it's utility as a way to build a theme.

Series

Part 1

Part 2

Part 3

Part 4

Part 5

Part 6 <-- you are here

Part 7