Theming

The LiSA Player and Widgets allow for fine-grained customization of the UI, going beyond just changing colors and fonts. These Theme Settings can be configured in the LiSA Console and can also be applied in a more targeted manner to specific environments (iOS, Android, web) using the methods described below.

A full list of available style settings and options can be provided by our support team.

Injecting Theme Styles

This guide explains how to inject targeted CSS properties.

Inject CSS at Page Load Using injectedJavaScript

To ensure the CSS is applied after the document starts loading:


const INJECT_STYLE_SETTINGS = `
  (function() {
    document.body.style.setProperty('--lsc-body-font-scale', 1);
  })();
`;

return (
  <WebView
    source={{ uri: 'https://{clientId}.loveslisa.tech/s/{showId}' }}
    injectedJavaScript={INJECT_STYLE_SETTINGS}
  />
);

  • Ensures styles are applied before content appears.

  • Injects --lsc-body-font-scale into <body>.

Injecting Theme Options

In addition to injecting style settings, all theme options can be assigned to the _lscLocalThemeOptions variable at the window level.

This allows partial overrides of the global player style and custom theme settings defined in the LiSA Console, specific to the environment where the player is integrated.

const INJECT_THEMING_OPTIONS = `
  (function() {
    window._lscLocalThemeOptions = { productCardClickBehavior: \"pipNative\" };
  })();
`;

return (
  <WebView
    source={{ uri: 'https://{clientId}.loveslisa.tech/s/{showId}' }}
    injectedJavaScript={INJECT_THEME_OPTIONS}
  />
);

Sets productCardClickBehavior to pipNative, enabling native Picture-in-Picture (PiP) mode for the current video upon product card click, if supported by the device's OS and Browser.

PreviousFile DownloadsNextPicture in Picture

Last updated