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 Sample app: AZ insurance (https://github.com/trailheadapps/az-insurance) Documentation: Style your LWR site (https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/advanced_custom_style.htm) Documentation: Lightning Design System Styling Hooks (https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/) Documentation: WCAG AA Contrast Ratio (https://www.w3.org/TR/WCAG/#contrast-minimum) Tool: Contrast Ratio Validator (https://webaim.org/resources/contrastchecker/) 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: Website: https://www.developer.salesforce.com/ Facebook: https://www.facebook.com/salesforcedevs/ Twitter: https://www.twitter.com/salesforcedevs LinkedIn: https://www.linkedin.com/showcase/salesforce-developers

Category