Theming and CSS variables

The Recorder widget can take on a brand's colors, fonts and layout through three distinct channels. They can be combined, but each has a different owner and a different lifetime.

Before this page

This page assumes the configuration shape from the previous page — in particular its styles and layout keys. Configuration

The styles configuration key

The configuration object accepted by the widget carries a styles key: a dictionary of CSS variables. This is the static, integrator-owned way to brand the widget — set once, shipped with the rest of the configuration, and identical for every visitor.

styleOverrides in React

The React component accepts the same mechanism as a prop rather than a nested configuration field.

tsx

import { LivstickWidget } from "@livstick/widget-react-v2";

<LivstickWidget
  uid="code"
  domain="example.com"
  styleOverrides={{ "--lv-accent": "#0f62fe" }}
/>

styleOverrides is a dictionary of CSS variables, applied on top of whatever the configuration's styles key already sets.
It lives entirely on the React side — the Custom Element and the classic loader do not expose an equivalent prop, only the config.styles key.

Dynamic colors and fonts from the server

Beyond static configuration, the widget can also receive colors and fonts computed server-side — brand values resolved per platform rather than hardcoded at integration time. These values are filtered for safety and then applied as local styles on the rendered elements, not injected into a stylesheet.

The stylesheet, and Shadow DOM isolation

The widget's main stylesheet is external, published as @livstick/widget-react-v2/style.css and, for the Custom Element, loadable through a style-url attribute. The Custom Element itself is isolated by Shadow DOM: the host page's own CSS cannot reach inside it, and the widget's styles cannot leak out onto the host page. The three theming channels above all operate inside that boundary.