Summer’18: Pre-Built Themes in Lightning Communities

With pre-built themes for Lightning Communities in Summer’18, any customer, partner, or developer can create visually stunning experiences in Lightning Community Builder with access to more controls and tools. Summer ’18 and the roadmap for Winter ’19 are the next steps in a journey to make building beautiful experiences in Lightning Communities seamless for developers and admins. In this blog post, you will learn about the underlying technology powering our theming engine, the building blocks of our new pre-built themes, and best practices for developers to adopt.

Lightning Community theming

Custom themes and the theming engine for Lightning Communities were first introduced at Dreamforce 2016. Themes (and theme layouts) are how any developer can deliver a customized UI for communities while still taking advantage of the rest of the Lightning Communities platform (including Community Builder).

It’s important to remember that themes are designed to control the overall layout and styling of your community (Think of it like your HTML template and global.css).

Summer ‘18: Pre-built themes

With the Summer ‘18 release, we are introducing four pre-built themes that will be available to use across any Salesforce ‘out of the box’ Lightning Community templates: Customer Service, Partner Central, Customer Account Portal, Build Your Own and any custom template you may have developed.

These pre-built themes are built on top of our existing theming framework and the forceCommunity:themeLayout Lightning component interface. They take advantage of several new design property interfaces (color picker, image picker, slider) that are surfaced in Community Builder and also leverage our new theme swapping functionality that allows you to change the active theme that is associated with the community instance. This means that it’s easy to quickly change the overall UI of the community without impacting any of the underlying pages, page layouts and/or components.

What you should know about pre-built themes (with Summer‘18)

As a developer, you should check out theme swapping. With theme swapping, any custom CSS you have entered through the “</> Edit CSS” option in Builder is now tied directly to your active theme. For an existing community, ensure that any desired custom CSS you are using is copied to the newly selected theme.

Additional points to consider:

Saved settings: We automatically save and maintain any configurations you make to each theme so it’s easy to jump between themes without losing customizations. If you have tested multiple themes in a community, we recommend removing the themes you do not plan to use in that community (via Settings > Theme > Manage).

Hero options: All pre-built themes come with an optional hero theme component for the Home page that is optimized for search, or “call to action” functionality and can be toggled on/off through theme properties.

Audience targeting: The new theme components (ex: Compact Header) do not currently support component-level targeting (visibility). You can achieve this in three simple steps:

Branding: Today, branding values you define in Builder (e.g.: Action Color) do not automatically propagate down into the theme components. This means that the Dynamic Branding feature will not automatically work in the pre-built themes. This is something we are planning to address with the upcoming Winter ‘19 release.

Multiple theme layouts: Several themes comes with two theme layouts: home and inner. When working with different theme layouts it’s important to note that theme component property values (e.g.: setting your header height to 80px) are applied to the pages with that theme layout assignment. If you have two theme layouts in your community, be sure to review all of your theme component settings.

What’s in store for the Winter’19 release

While our ‘out of the box’ pre-built themes are geared toward customers who don’t have the necessary skillset for building a custom theme, there are several key platform enhancements we are looking to rollout for developers starting with the Winter ’19 release:

Standalone packaging: Developers will be able to programmatically build ‘reusable’ standalone themes using the Metadata APIs. “Export theme” functionality will also be coming to the Builder soon.

Design properties: We will be exposing a series of currently internal-only design property interfaces (ex: Color picker) that you will be able to leverage in your own custom Lightning components.

Here’s an example of leveraging the new interfaces (design properties) to provide declarative controls in Community Builder.

Themes on AppExchange: In addition to standalone theme packaging, we will also be opening up AppExchange for developers to publish reusable themes for customers to download and leverage.

Best practices to follow for themes

Whether you are currently developing your own custom theme / theme layouts or just getting ready to dive in, here are some key best practices to keep in mind:

Component styling: Always try to limit the amount of CSS overrides you leverage for styling Salesforce components. If you do use them, make sure you do sanity check during sandbox releases and use styling best practices.

Establish guardrails: Keep any declarative customization that you expose in Builder for customers to manage simply. Make it hard to produce bad results and consider styling guard rails (especially for mobile devices)

Summary

If you’re already building custom themes today, get ready to start leveraging some of the new functionality rolling out with the Winter’19 release and take them to the next level for your customers. If you’re new to custom themes, hopefully this gives you a great overview of what’s on the horizon and the resources you need to get started.