Next Experience UI - Understanding Themes Table of contents OverviewWhat are out-of-the-box (OOB) Themes within Next Experience?How users can select Dark Theme from their preference?How to apply new style to Next Experience UI16 look?How to apply new fonts or new style to existing Polaris Themes?How to apply custom themes for Workspace when Next Experience is turned off?How to apply same theme to all users by default?How to make certain styles available for certain role users only?How to change logo at instance level? Information on all CSS properties 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. Default theme. Dark Theme. How Users can select Dark Theme from their preference? Login as Admin user. Create System property if not exists. 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:- Go to UX Styles [ sys_ux_style ] table. Create new record. Name - Give name as per style record for ex. Blue and Green, Contrast UI, Rose etc. Type - VariantStyle - { "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:- Go to UX Styles [ sys_ux_style ] table. Create new record. Name - Give name as per style record for ex. Blue and Green, Contrast UI, Rose etc. Type - CoreStyle - { "properties":{ "--now-font-family": "Didot" } } Click submit. Go to m2m_theme_style.list table or go to Related lists - UX Theme Style. 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. Click Submit. This would make Polaris Themes enabled with Didot Fonts. How to apply Custom themes for Workspace when Next Experience is Turned off? Navigate to Now experience Framework - ThemesCreate a new Theme RecordEnsure it extends the Base Agent Workspace ThemePopulate 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"} 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. Go to UX Styles [ sys_ux_style ] table. Find out sys id of style which you want to apply by default.Go to User preference table - sys_user_preference Create new record. Name - glide.ui.polaris.theme.variantvalue - e09ef7ae07103010e03948f78ad3002cSystem - 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? In the filter navigator please type basic configuration U16.We will see an option as Banner Image for U16Please upload the file and save the recordif u don't see the image uploaded please do a cache.doTry logout.do and logging again in the instance. Information on all CSS Properties Couple of CSS properties are listed in Documentation as follows:-Next Experience CSS Custom properties for Theming sys_ux_theme_property table contains list of all CSS Properties. NDS components will have theming props listed on dev portal