How do you create a new variant for the polaris theme?

[Erick18]

How do I create a new variant for the polaris theme. I would like to create several new variants similar to Dark mode so that users can select additional theme preferences? 

[Luke7 · Accepted solution]

You can create new variants for Polaris by creating a new UX Style (sys_ux_style) and setting the type to 'variant'. After saving the record, you will see a m2m related list for UX Theme Styles that you can use to relate your new style back to the Polaris theme. In a variant, you only need to specify the attributes you wish to override - so you don't need to include absolutely everything from the core colors style. 

You can also open the existing Dark variant UX Style, insert & stay, and modify the theme as needed. You will still need to relate the style to the Polaris theme using the m2m related list after using insert & stay.

[Erick18]

Luke, 

Is there any guidance or documentation on which attributes control which colors on the theme?

Thanks,

Erick

[Luke7]

Unfortunately, I've not had the best luck with the official documentation on this topic. I'm going through the process of reading docs, community posts, and a lot of trial and error as we speak. I first tried using Theme Builder, which is available with Utah, but many UI Elements weren't styled correctly, so I am back to manually modifying the JSON.

Below are what I've found to be the most important attributes so far. Note that I am using these in conjunction with the OOB Polaris core colors, there are a bunch of attributes that I did not have the need to override. I have not gone down the path of custom dark themes yet, but plan to duplicate/modify the OOB Dark variant when I do. Hope this helps you get started.

--now-color_brand--primary	Primary brand color
--now-color_brand--secondary	Secondary brand color
--now-color_brand--neutral	Neutral brand color
--now-color--primary	Color used for primary UI Elements (i.e., "New" button from list view, row/cell hover style, etc...)
--now-color--secondary	Color used for secondary UI elements
--now-color--neutral	Color used for neutral UI Elements (i.e., scrollbar)
--now-unified-nav_header--background-color	Top navigation menu color
--now-color_chrome--brand	Unified navigation menu color
--now-color_selection--primary	Active selections (i.e., related list/tabbed section highlight)
--now-color_selection--secondary	Seconday Selections - don't recall where this shows up, I just set it to my secondary brand color
--now-color--interactive	Interactive elements (i.e., interactive filter choices)
--now-color--focus	Focused elements (i.e., selected form field outline)
--now-color--link	Hyperlink colors (i.e., list view references)

Here are some other community posts you may find useful:

Next Experience UI Theming Overview - ServiceNow Community

Themes in UI Builder (servicenow.com) - Lists some CSS classes

[cielocharomarti]

Do you know if its possible to edit a theme so it modifies backend AND frontend? Meaning when you select dark mode variant, it makes the backend dark but also the portal? So users can select it manually. Or maybe there already is an option for that  . Thanks!