> 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/react-native/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 `injectedJavaScript`**
To ensure the CSS is applied **after the document starts loading**:
```tsx
const INJECT_STYLE_SETTINGS = `
(function() {
document.body.style.setProperty('--lsc-body-font-scale', 1);
})();
`;
return (
);
```
* Ensures styles are applied **before** content appears.
* 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.
```typescript
const INJECT_THEMING_OPTIONS = `
(function() {
window._lscLocalThemeOptions = { productCardClickBehavior: \"pipNative\" };
})();
`;
return (
);
```
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.