> For the complete documentation index, see [llms.txt](https://docs.hello-lisa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hello-lisa.com/developers/guides/integration-guide/app-integration/android/theming.md).

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

{% hint style="info" %}
A full list of available style settings and options can be provided by our support team.
{% endhint %}

### Injecting Theme Styles

This guide explains how to inject **targeted CSS properties**.

#### **Inject CSS Properties**

```kotlin
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.&#x20;

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.

```kotlin
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.
