# elements.update()

> Live update, e.g.

Source: https://docs.tryyoursize.com/reference/web/elements-update/

*Method* · `@tryyoursize/sdk`

Live update, e.g. when the shop switches to dark mode.

Mounted elements and an open window restyle at once; nothing reloads.

```ts
update(options: ElementsOptions): void;
```

## Parameters

- **`options`** (`ElementsOptions`, required)
  - **`appearance`** (`Appearance`, optional): Look and feel; by default the elements inherit the page's font and colours.
  - **`locale`** (`Locale`, optional)

## Examples

### Follow your dark mode

**JavaScript**

```js
const dark = matchMedia("(prefers-color-scheme: dark)");
dark.addEventListener("change", () =>
  elements.update({ appearance: { theme: "inherit" } }), // re-reads your page's colours
);
```

**React**

```tsx
// The provider calls elements.update() when options.appearance changes.
<TryYourSizeProvider publishableKey="pk_test_…" options={{ appearance: dark ? darkAppearance : lightAppearance }}>
```

## See also

- [Appearance and theming](https://docs.tryyoursize.com/guides/appearance.md)