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.

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.

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

How --dxp Styling Hooks Map to Theme Panel Properties
Each declarative property in the Theme panel maps to one or more programmatic --dxp styling hooks. When a user updates a property in the Theme panel, the system automatically updates any Lightning web component that uses the hooks associated with that branding property.

Use --dxp Styling Hooks in Custom Components
To build a custom Lightning web component for your site that uses the design system, use the appropriate --dxp styling hooks.

Override Component Branding in LWR Sites 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 Color Palette for Page Sections and Columns
On many websites, it’s common to have sections of a page, such as the header, footer, or columns and 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 these page areas.

Create a Configurable Site Logo Component
Use the --dxp-s-site-logo-path and --dxp-s-site-logo-url global styling hooks to create an easily configurable site logo component that you can add to your site pages. When you update the Site Logo property in the Images tab of the Theme panel, the system automatically updates any component that references the hooks.

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.