search

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.

circle-info

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

hashtag
Injecting Theme Styles

This guide explains how to inject targeted CSS properties.

hashtag
Inject CSS at Page Load Using WKUserScript

To ensure the CSS is applied as soon as the document loads:

let scriptSource = "document.body.style.setProperty('--lsc-body-font-scale', 1);"
let userScript = WKUserScript(source: scriptSource, injectionTime: .atDocumentEnd, forMainFrameOnly: true)

let contentController = WKUserContentController()
contentController.addUserScript(userScript)

let config = WKWebViewConfiguration()
config.userContentController = contentController

let webView = WKWebView(frame: .zero, configuration: config)

  • This ensures CSS properties are applied immediately when the page loads.

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

hashtag
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.

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 DownloadsNextReact Native

Last updated