Next Experience UI - Understanding Themes

Overview

Next Experience delivers a next-generation, intuitive, personalized experience to drive productivity, improve engagement, and surface insights across the Now Platform starting from San Diego. Out of the box, it provides two types of Themes. One is Default and another is Dark Theme. Customers can create their own Theming experience and integrate it with their Company standards. Theming applies to classic UI in Lists, Forms, and Dashboards. This article will demonstrate all possible questions that you would come across while configuring themes on your instance within Next experience. 

What are out-of-the-box Themes within Next Experience? 

As of now in San Diego release, Next Experience UI offers only two out-of-the-box Themes for UI16 users. 

1. Default theme. 
2. Dark Theme. 

How Users can select Dark Theme from their preference? 

1. Login as Admin user. 
2. Create System property if not exists. 
3. Use the following values:

• • Name - glide.ui.polaris.dark_themes_enabled , 
  • Type - true|false 
  • Default Value - true 
  • Description - Enabled dark theming

4. Click Submit.

Note: "The dark theme does not apply to Core UI experiences or custom experiences." - Exploring themes in Next Experience

For more information - Next Experience System properties

How to apply new Style to Next Experience UI16 Look? 

In UI16, We can choose different style for our instance as per screenshot below.

Similarly, we can create different style and associate it to Polaris Theme so users can get different options to choose from. Steps:- 

1. Go to UX Styles [ sys_ux_style ] table. 
2. Create new record. 
   • Name - Give name as per style record for ex. Blue and Green, Contrast UI, Rose etc. 
   • Type - Variant
   • Style -

{
  "base": {
      "--now-color--neutral": "85,107,47",
      "--now-color--primary": "32,178,170",
      "--now-color--secondary": "255,165,0",
      "--now-color_selection--primary": "0,123,88",
      "--now-color_selection--secondary": "79,82,189"
},
  "properties":{
      "--now-actionable--border-radius":"4px",
      "--now-actionable--border-width":"1px",
      "--now-container--border-radius":"4px",

      "--now-font-family": "Comic Sans MS, Courier,Aria, sans-serif",
      "--now-line-height-crop--before": "-0.25775em",
      "--now-line-height-crop--after": "-0.27825em"
  }
 }

3. Click submit.

4. Go to m2m_theme_style.list table or go to Related lists - UX Theme Style.

5. Create new record

• • Style - Select newly created style 
  • Theme - Select Polaris 
  • Applicability - Select which role users should see this style. For ex. Only all Admin should have this new style as option. 

6. Click Submit. 

This will enable an extra option when you go to Preference - Themes. Screenshot below as reference. 

How to apply new fonts or new style to existing Polaris Themes?

Steps:- 

1. Go to UX Styles [ sys_ux_style ] table. 
2. Create new record. 
   • Name - Give name as per style record for ex. Blue and Green, Contrast UI, Rose etc. 
   • Type - Core
   • Style - 
     

     {
       "properties":{
           "--now-font-family": "Didot"
       }
      }
     

3. Click submit. 
4. Go to m2m_theme_style.list table or go to Related lists - UX Theme Style. 
5. Create new record 
   • Style - Select newly created style 
   • Theme - Select Polaris 
   • Applicability - Select which role users should see this style. For ex. Only all Admin should have this new style as option. 
6. Click Submit. 

This would make Polaris Themes enabled with Didot Fonts. 

How to apply Custom themes for Workspace when Next Experience is Turned off?

1. Navigate to Now experience Framework - Themes
2. Create a new Theme Record
3. Ensure it extends the Base Agent Workspace Theme
4. Populate the theme field with values for the required CSS variables that would determine the custom theme.

{
  "--now-color_brand--primary": "138,48,127",
  "--now-color--neutral-15": "104,131,188",
  "--now-chrome-tabs--background-color": "188,161,104",
  "--now-canvas-toolbar-button--background-color--focus": "188,161,104",
  "--now-button--primary--background-color": "104,131,188",
  "--now-button--secondary--background-color": "104,173,188",
  "--now-content-tree--background-color--selected":"188,161,104",
  "--now-container--border-color":"104,121,188",
  "--now-content-tree_sidebar--background-color--selected":"104,121,188",
  "--now-color_surface--brand-2":"104,131,188",
  "--now-window-background-color":"188,161,104"
}

5. Associate the theme record with the experience

How to apply same theme to all users by default?

User Preference - glide.ui.polaris.theme.variant can be used. For ex. you want to apply dark theme for your all users. 

1. Go to UX Styles [ sys_ux_style ] table. 
2. Find out sys id of style which you want to apply by default.
3. Go to User preference table - sys_user_preference
4.  Create new record. 

• • Name - glide.ui.polaris.theme.variant
  • value - e09ef7ae07103010e03948f78ad3002c
  • System - true 

           5. Submit 

Login with any test users and see change. 

How to make certain styles available for certain role users only?

Applicability Specify applicability to apply overrides to the base theme. Users who meet the applicability constraints see those overrides in their theme rather than the base style. For example, say a style with different fonts is applicable for a list of managers. The managers see the UI with the fonts in the new style, which consists of overrides to the base system theme values. You therefore don't have to copy an entire theme with changes for the applicable audience.

Product Documentation link

Steps to follow:- 

When you associate your style to your theme for ex. Polaris theme in UX Theme Style [ m2m_theme_style ] table, make sure to add Applicability. 

You can add one role at a time. 

How to change logo at Instance level? 

1. In the filter navigator please type basic configuration U16.
2. We will see an option as Banner Image for U16
3. Please upload the file and save the record
4. if u don't see the image uploaded please do a cache.do
5. Try logout.do and logging again in the instance.

Information on all CSS Properties

1. Couple of CSS properties are listed in Documentation as follows:-
   Next Experience CSS Custom properties for Theming 
2. sys_ux_theme_property table contains list of all CSS Properties. 
3. NDS components will have theming props listed on dev portal