Brand Your LWR Site | LWR Sites for Experience Cloud

How Branding Works in LWR Sites
With the Lightning Web Runtime (LWR) design system, you can modify base and custom Lightning web components to achieve a consistent look and feel across your LWR site. The system uses --dxp styling hooks, which map to properties in the Theme panel, to help you more easily apply branding to your entire site.

--dxp Styling Hooks
With --dxp styling hooks, you can set a single hook that affects both base and custom Lightning web components throughout your site.

Enable --dxp Styling Hooks
If you created your LWR site before Summer ’21, enable --dxp styling hooks by adding the DXP branding style sheets to your site.

Brand Custom Components Using --dxp Styling Hooks
To build a custom component that uses the design system, use the appropriate --dxp styling hooks.

Override Component Branding with Custom CSS
Occasionally, styling hooks are insufficient to style a component exactly the way you want. In this situation, you can use CSS selectors to target and style preapproved “parts” within a component.

Create a Section Color Palette
On many websites, it’s common to have sections of a page, such as the header, footer, or banners, that use different colors from the overall site. For example, perhaps you want to create a header with a dark background and a light foreground, whereas the rest of your site does the opposite. To achieve this, you can create separate color palettes and apply them to your page sections. Each section on a page can have its own color palette.

Add Custom Fonts
You can add custom fonts by uploading the font file as a static resource. Alternatively, you can reference a file that’s hosted externally.

Remove SLDS
If necessary, you can remove Salesforce Lightning Design System (SLDS) from your site.