Next Experience UI - Converting UI16 Themes to Next Experience UI Themes

[Ashley Snyder]

You are viewing content included in the Next Experience Center of Excellence

UI16 themes are not automatically converted into Next Experience UI theme variants. Users can create their own variants based upon UI16 themes if needed. Next Experience UI themes are broken down into three main branding colors: Primary, Secondary, and Neutral. UI16 themes can be broken out into the three main branding colors, as shown in the UI16 theme picker. It is recommended that admins try the themes in a sub-production instance, as the Next Experience UI theme utilizes different shades of colors for elements and will utilize not colors in the same way as UI16.

One of the easiest ways is to use a color picker extension in your browser and just grab the colors from the theme picker. The colors can also be found under System UI > Themes (sys_ui_themes), see the table below for UI16 theme variables.

Icon Color	UI16 Theme Variable	Next Experience Theme Color
Color Lighter (Top)	$navpage-header-bg	Can be used as either Primary or Secondary
Color Darker (Bottom Right)	$navpage-header-divider-color	Can be used as either Primary or Secondary
Accent Color (Bottom Left)	$navpage-nav-bg	Neutral

Use the Color Generator to generate a theme based upon the three branding colors defined above, the following steps walk through generating JSON for a Next Experience UI style and creating a variant. You can choose how many UI16 themes variants are created and create new variants with this method. For more information see the Theming in Next Experience COE article.

1.	Click the Auto Generate button at the top right of the Color Generator.
2.	Enter in three brand colors to use.
3.	Click Copy JSON to get the entire JSON for your UX Style record.
4.	In your instance login in as a user that has the admin role.
5.	Navigate to the UX Style (sys_ux_style) table.
6.	Click New at the top right hand corner.
7.	Give the UX Style record a name, this value is what is shown to users when they go to select the variant in their user preferences.
8.	Change the Type field to Variant.
9.	In the Style field, enter the following JSON (This JSON was created using the Color Generator mentioned above, via the Auto Generate feature, entering in the three brand colors, and the Copy JSON feature):
	{ "properties": [Enter the copied JSON here, it will contain it's own start/end brackets] }
10.	Save the record.
11.	Associate the UX Style record to the Polaris UX Theme by navigating to the UX Theme Styles (m2m_theme_style) related list on the UX Style record, and click the New button at the top right.
12.	If the variant is available for all users, the Applicability field can be left blank. In the Theme field, choose Polaris.
13.	Save the record.
14.	The variant is now available for selection when a user navigates to Preferences > Themes. If setting a Core style, you may need to log out and back in for the changes to take effect.

 UI16 Blimey Theme

Next Experience UI Blimey Variant