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 Properties

webView.webViewClient = object : WebViewClient() {
    override fun onPageFinished(view: WebView?, url: String?) {
        val js = "document.body.style.setProperty('--lsc-body-font-scale', 1);"
        view?.evaluateJavascript(js, null)
    }
}

Executes after the page finishes loading.
Injects --lsc-body-font-scale directly into <body>.
Ensures dynamic modifications without modifying the HTML source.

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.

webView.webViewClient = object : WebViewClient() {
    override fun onPageFinished(view: WebView?, url: String?) {
        val js = "window._lscLocalThemeOptions = { productCardClickBehavior: \"pipNative\" };"
        view?.evaluateJavascript(js, null)
    }
}

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 Downloads NextiOS

Last updated 17 days ago