Adding variations to "Polaris" Theme from Now Experience

With the San Diego release we also got to enjoy the launch of a new UI Experience called Now Experience which contains a new Theme - Polaris. Unlike UI16, with the Now Experience it's no longer possible to change the look and feel with a simple configuration site. In upcoming releases ServiceNow will add something similar to the UI Builder for easier configuration of themes. With some adjustments of the current variables, it's already possible to change some basic colors to adjust the look to a specific CI.

Preparation:

In order for a theme switch to be available at the users preferences, we have to enable the following system properties.
sys_properties.list

• glide.ui.polaris.on_off_user_pref_enabled => true (allows enable/disable New Expierence in user preferences)
• glide.ui.polaris.dark_themes_enabled => true (enables possibility to switch theme variants in user preferences)
• glide.ui.polaris.login.show_illustrations => false|true (show or hide illustration effects on login site)

Creating theme variations:

Navigate to "Now Experience Framework" > "Themes".
At the "UX Theme Styles" Table you can create a new variant with your desired name. like "Prozessfux v1.0".

*The table is locked as private from the app "sn-themes". Changes are only possible in corresponding app scope.

As an example, the UX Style "dark" could be copied and changed.

The values entered in the variant will only override the default values, it's recommended to only add the values needed or simply start fresh.

Fresh start template:

The overall experience can get quite frustrating as many variables are used multiple times which can create a large scale effort to fully customize the experience. Keeping it simple at this stage of development is highly recommended.

UX Style from Prozessfux V1.0

The Font "Source Sans Pro" is already pre-installed and can be used as an alternative to the new font.

Variable Explanations

1. "--now-unified-nav_header--background-color": "248,179,51" --> background-color top bar
2. "--now-unified-nav_menu--background-color ": "53,69,89" --> background-color sidenavigation
"--now-unified-nav_menu--background-image-alpha": "0" --> remove wave background image from sidebar navigation
"--now-unified-nav_favorite-icon--color": "254,254,254" --> favorite-star color in navigation
3. "--now-color_chrome--brand-4": "247,194,107"
"--now-color_chrome--divider-1": "240,240,240"
4. "--now-unified-nav_menu-filter--background-color": "65,85,109" --> background-color search field
"--now-unified-nav_menu-filter--border-color": "240,240,240" --> border-color search field
"--now-unified-nav_menu-filter--color": "255,255,255" --> font-color search field
5. "--now-color_brand--secondary ": "230,230,230" --> background secondary behind content frame

Some other variables..
"--now-login-background": "53,69,89" --> background-color of login site
"--now-color_chrome--brand-10": "248,179,51" --> also used for top bar as well other things
"--now-color--primary": "53,69,89" --> used as sidebar background as well
"--now-color--secondary": "248,179,51 " --> used in links and buttons
"--now-color_chrome--divider-1" : "240,240,240" --> used as border color in top bar title