skills.rest
sfdc-brendan
sfdc-brendanCOMMUNITY
Explore all skills by this author →
GitHub

sf-lwc-theming

Create scalable brand tokens extending SLDS for Lightning Web Components.

15|Updated Jan 27, 2026
Search Tags:#theming#dark-mode#slds#lwc#multi-brand#brand-tokens#experience-cloud
One-click install
npx skills add https://github.com/sfdc-brendan/Demo-Lab --skill sf-lwc-theming
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sf-lwc-theming
Source: https://github.com/sfdc-brendan/Demo-Lab/tree/main/skills/sf-lwc-theming
Command: npx skills add https://github.com/sfdc-brendan/Demo-Lab --skill sf-lwc-theming

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create scalable brand-themed Lightning Web Components by extending SLDS 2 with brand tokens and per-brand systems. This approach enables consistent branding across internal Lightning experiences, Experience Cloud sites, and mobile apps, without sacrificing the core design system.

Core Features & Use Cases

  • Brand token architecture that sits above SLDS hooks, providing a three-level fallback to brand, SLDS, and literal values.
  • Multi-brand support with per-host customization and App Builder integration to switch brands at runtime or design-time.
  • Experience Cloud integration through token mappings to DXP where available, ensuring consistency across sites.
  • Component-level theme overrides and host-level theming to tailor visuals per context while preserving the design system.
  • Dark mode is optional and can be added via tokens and a toggle, if requested.

Quick Start

Define a base brand token system in your root LWC and apply it to the host component to start branded theming.

Frequently Asked Questions about sf-lwc-theming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply custom brand tokens to Lightning Web Components?▼

Multi-brand theming uses per-host customization and App Builder integration to switch brands at runtime or design-time. This allows a single component to render distinct brand configurations across internal Lightning and Experience Cloud.

Does this LWC theming approach support dark mode?▼

Experience Cloud integration works through token mappings to DXP where available. By mapping your brand tokens to DXP, you ensure consistent visual branding across Experience Cloud sites, internal Lightning, and mobile apps.

What is the best way to scale SLDS theming across multiple brands?▼

The best way to scale SLDS theming is using a brand token architecture with a three-level fallback to brand, SLDS, and literal values. This extends SLDS 2 without sacrificing the core design system across multiple branded experiences.

Can I override SLDS styles at the component level in LWC?▼

Yes, you can use component-level theme overrides and host-level theming to tailor visuals per context. This approach preserves the underlying SLDS design system while allowing specific visual adjustments for individual LWC components.

Related Skills

Explore More Design & Creative Skills→
sfdc-brendansfdc-brendan
15

sf-lwc-design

Create SLDS 2 compliant LWC components using --slds-g-* hooks.

Community
Advanced
valithedgevalithedge

appbuilder-ui-scaffolder

Scaffold App Builder UI SPAs with React Spectrum components.

Community
Intermediate
forcedotcomforcedotcom
803

uplifting-components-to-slds2

Migrate LWC styling from SLDS 1 to SLDS 2 with hook-based replacements.

Official
Intermediate
cchrisvcchrisv

uplifting-components-to-slds2

Migrate Lightning Web Components from SLDS 1 to SLDS 2 with lint-guided fixes.

Community
Advanced