Xanadu, Next Experience (Polaris) Themes Part 7

September 3, 2024 · 4 min read

ServiceNow Wizard

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

Xanadu updates

The Xanadu release is out (in EA and available on PDIs at the time of writing) and has some interesting theme changes.

Publish Themes

In Theme Builder there is now the concept of "Publishing" a theme. This is a replacement for the concept of just having one theme with many variants. Instead you would (typically) have a Theme with a single variant for Dark. There is nothing to stop you from having many variants on a single theme, but I feel like it generally makes sense to have a light and a dark version.

Fortunately you dont need to use Theme Builder to access this functionality. In order to "Publish" themes that aren't in Theme Builder you just need an entry in the m2m_app_theme table. This means that you can also make an entry for the default Polaris theme and not lose access to that if you want to continue to make it available. Another nice thing is that this table has a column for Order, which lets you decide how you want to have many themes sorted. In the lasted version of my Retro Collection of themes I am taking advantage of this.

Using this table also makes the instance ignore the glide.ui.polaris.theme.custom property.

Theme Builder

Theme Builder got another upgrade. Unfortunately, I still feel the same way about it that I did in Part 1 of my series of Theme articles. There are certainly some good quality of life and accessibility enhancements getting adding, but I just can't seem to make anything that looks good with it.

Other Theme Changes

The most interesting thing that I found was when looking at what Theme Builder generates. There are some things that it adds to the base object that do not expand into other properties, which isn't new (and seems like a small defect), but now there are two new properties in base which DO expand.

{
  "base": {
	    "--now-color_secondary-nav--divider": "204, 204, 204",
	    "--now-color_secondary-nav--brand": "204, 204, 204"
  }
}

Which expand into:

{
    "properties": {
	"--now-color_secondary-nav--divider-0":"235,235,235",
	"--now-color_secondary-nav--divider-1":"228,228,228",
	"--now-color_secondary-nav--divider-2":"222,222,222",
	"--now-color_secondary-nav--divider-3":"216,216,216",
	"--now-color_secondary-nav--divider-4":"210,210,210",
	"--now-color_secondary-nav--divider-5":"204, 204, 204",
	"--now-color_secondary-nav--divider-6":"171,171,171",
	"--now-color_secondary-nav--divider-7":"139,139,139",
	"--now-color_secondary-nav--divider-8":"106,106,106",
	"--now-color_secondary-nav--divider-9":"73,73,73",
	"--now-color_secondary-nav--divider-10":"41,41,41",
	
	"--now-color_secondary-nav--brand-0":"247,247,247",
	"--now-color_secondary-nav--brand-1":"239,239,239",
	"--now-color_secondary-nav--brand-2":"230,230,230",
	"--now-color_secondary-nav--brand-3":"221,221,221",
	"--now-color_secondary-nav--brand-4":"213,213,213",
	"--now-color_secondary-nav--brand-5":"204, 204, 204",
	"--now-color_secondary-nav--brand-6":"184,184,184",
	"--now-color_secondary-nav--brand-7":"163,163,163",
	"--now-color_secondary-nav--brand-8":"143,143,143",
	"--now-color_secondary-nav--brand-9":"122,122,122",
	"--now-color_secondary-nav--brand-10":"102,102,102"
    }
}

I havent seen any signs of these colors being defined in any oob themes (yet?). I also do not know of anywhere that they are being used in an instance, but that is much harder to search out and find. I just thought it was notable that they exist.

Bonus cool thing

I have been long looking for some way to input a base theme color and be able to find out what it will expand into. I really want to be able to generate something exactly like what I have in the previous section.

I finally found it while poking around in a Script Include that came with Theme Builder.

It uses an undocumented API, use at your own risk, it may suddenly stop working or change in behavior with no notice or support.

If you call: GlideUxTheme.processBaseProperties(styleObj.base, styleObj.isDark, styleObj.colorGenerationVersion); you will get back a JSON object with the expanded version of the properties you feed into it. The properties come back in a consistent order, but not one that makes any sense to me. At least they are grouped so that the colors expanded from a Base color stay together.

I am working on a Service Portal widget that uses it to show you all of the colors that the currently applied theme/variant uses in addition to the raw data, but that isn't ready for anyone to use yet.