---
schema_version: "1"
id: ebb0c520f6b7189992635dba7591c5944e42c4d4286dc8d4583aa4c76a573178
title: Apply Brand Theming to Embedded MFE Widgets (Developer Preview)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/release-notes/262-0-0/rn_mfe_theming.md
canonical_url: https://help.salesforce.com/s/articleView?id=release-notes.rn_mfe_theming.htm&release=262.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 46b71456dd6c65ab66c5e8fda385176d5fdeb2283b549a3824d9d09f99297639
description: Keep embedded widgets visually consistent with your brand. Propagate design tokens into sandboxed iframes using standard CSS custom properties without additional JavaScript wiring inside the widget.
products:
  - Cross Cloud
release: "262"
---
# Apply Brand Theming to Embedded MFE Widgets (Developer Preview)

Keep embedded widgets visually consistent with your brand. Propagate design tokens into sandboxed iframes using standard CSS custom properties without additional JavaScript wiring inside the widget.

**Where:** This change applies to Lightning Experience, Experience Builder sites, and Experience Cloud LWR sites in all editions.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-release-notes-salesforce_release_notes-262-0-0-production-enus/e945111b-3e0a-4011-accc-d5949363bfcc/images/icon_note.png)

Note The Dev Channel provides access to features that are not generally available and have been designated as pilot, beta, limited release, or developer preview. Their use is at the Customer's sole discretion and is subject to the Beta Services Terms at [Agreements - Salesforce.com](https://www.salesforce.com/company/legal/).

**How:** Set CSS custom properties on the `<lwc-shell>` element or any ancestor element in your wrapper LWC. For example: `style="--brand-color:#0070d2; --font-family:Salesforce Sans,sans-serif;"`.

Inside the widget, reference tokens with standard CSS: `color: var(--brand-color)`.

The shell reads all `--*` properties from its computed style via `getComputedStyle(this)` once at mount and forwards them to the iframe. The shell does not observe host-side style mutations automatically.

To update tokens at runtime — for example, when a user switches to dark mode:

1. Set new values on the host element with `style.setProperty()`.
2. Call `shell.refreshTheme()` to re-scrape computed styles and forward the updated tokens.

Keep these considerations in mind:

- Only CSS custom properties (names starting with `--`) cross the iframe boundary. Regular CSS declarations (`color`, `background`) on the host don't propagate.
- Tokens must be declared on the `<lwc-shell>` element or an ancestor element. Tokens on sibling elements don't propagate — `getComputedStyle(this)` reads from the shell's own inheritance chain.