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