> 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/ios/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 at Page Load Using `WKUserScript`** To ensure the CSS is applied as soon as the document loads: ```swift 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 ``. ### 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. ```swift let scriptSource = "window._lscLocalThemeOptions = { productCardClickBehavior: \"pipNative\" };" 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) ``` 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 This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.hello-lisa.com/developers/guides/integration-guide/app-integration/ios/theming.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.