Keep an embedded app visually consistent with the surrounding Salesforce experience. Salesforce passes styling values to the embedded app as CSS custom properties, so your app can read them and match the page’s colors, spacing, and other theme values.
Salesforce composes a UI state for each embedded app and pushes it to the guest through the embedding protocol. That UI state includes a styles object with two parts: a variables object built from CSS custom properties (styling tokens) and an attributes object of allowlisted HTML attributes. Your embedded app reads these values from the current state and applies them to its own styles. When the values change, Salesforce pushes an updated UI state, and your app restyles by subscribing to those updates.
The host sets both parts on the lightning-ui-embedding element itself. Inline CSS custom properties (style="--x: y") become styles.variables, and the allowlisted HTML attributes become styles.attributes. The component reads them off the element and forwards them to your embedded app.
Theming is scoped to CSS custom properties. Salesforce doesn’t automatically restyle your app’s components or replicate the full design system inside your app. Your app decides how to apply the token values.
Note
lightning-ui-embedding and loads successfully.createViewSDK is asynchronous, so await it. getUiState returns the current state and a subscribe function you use to react to later updates.1import "@salesforce/platform-sdk/ui-embedding";
2import { createViewSDK } from "@salesforce/platform-sdk/view";
3
4const viewSdk = await createViewSDK();
5
6// Off an embedding surface, createViewSDK resolves to an empty object,
7// so guard the call before you use it.
8const uiState = viewSdk.getUiState?.();
9if (uiState) {
10 applyStyles(uiState.state.styles?.variables);
11}state.styles.variables to your app.The variables arrive as name-value pairs. Map them to your app’s styles so your colors and spacing follow the Salesforce theme.
state.styles.attributes to your app.Along with the variables, styles.attributes mirrors these attributes so your app can match the host: autocapitalize, autocorrect, dir, enterkeyhint, inputmode, lang, spellcheck, title, and translate. Applying dir (RTL or LTR) and lang is especially important for matching the Salesforce experience.
1const { variables, attributes } = uiState.state.styles ?? {};
2applyStyles(variables);
3applyAttributes(attributes);1const unsubscribe = uiState.subscribe((next) => {
2 applyStyles(next.styles?.variables);
3 applyAttributes(next.styles?.attributes);
4});The embedded app resolves its own platform context, such as locale and form factor. Salesforce doesn’t send theme, locale, or formFactor as part of the UI state.
Note
j