Style LWR sites with custom CSS variables

The fourth episode of this series looks into how you can bring your custom branding to LWR sites, your custom Lightning web components, as well as base Lightning components.

Resources

0:00 Introduction
0:22 Custom styling overview
1:18 Custom CSS properties explained
3:28 How to customize an LWR site theme visually
4:28 Use static resources for global CSS properties
5:24 Programmatic use of CSS properties
6:50 CSS fallback properties and contrast ratio

Connect with Salesforce Developers:

[ramonp]

Great video and very useful content. Thanks a lot.

[derekhaworth]

I think it's important to note the 'sds' namespace will now be 'slds' as a GA.

[riccardocastellano]

can be target only the homepage( or other specific page ) with the css write in head markup ?

[ImranaTime]

How can you change the Search UI for LWR Sites?
Like say I want the box to have rounded edges instead of square?

[MuhammadAsimAli-ze]

Were custom properties not available in Aura runtime?

[neronoir]

Hello, say I have an LWC that is used internall and experience cloud (LWR), is it possible to use or load a custom font for both? I initially have an LWC that has custom fonts and it works internally but when looking at it in the Experience Builder, it does not apply the font. Is it a limitation where we should create multiple references that adjust whether it is used internally vs externally? or is there a much more efficient way to implement custom font loading that works for both areas.

[petargechev]

Hi there, when I try to set up the sample app, I get the "Error LWR_Demo_Marketing1 The value for urlPathPrefix in ExperienceBundle isn't valid. Could you check the value and try again" error. Do you have any idea why and how to fix the problem?