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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hello-lisa.com/developers/guides/integration-guide/app-integration/android/theming.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
