# Appearance and theming

> TryYourSize elements inherit your page's font and colours by default. Override them with appearance variables, live.

Source: https://docs.tryyoursize.com/guides/appearance/

By default every element **inherits your page**: the font, text colour and background where it is mounted, with buttons in your text colour (like most shops' main button). You usually need no styling at all.

## Appearance API

Like Stripe's Appearance API, pass `appearance` when you create the elements group:

```ts
const elements = tys.elements({
  appearance: {
    theme: "inherit",            // default; or "tryyoursize" (our light beige brand)
    variables: {
      colorPrimary: "#111",
      colorBackground: "#fff",
      colorText: "#111",
      fontFamily: "Inter, sans-serif",
      borderRadius: 8,
    },
    fonts: [{ cssSrc: "https://fonts.googleapis.com/css2?family=Inter:wght@400;600" }], // Google Fonts only
  },
  locale: "auto",
});
```

| Variable | Used for |
|---|---|
| `colorPrimary` | Buttons and accents; the "connected" dot on the size guide |
| `colorBackground` | Element and window background |
| `colorText` | Text |
| `fontFamily` | Text in the element and the window |
| `borderRadius` | Corners (px); the size guide uses it for `variant: "button"` |

The TryYourSize mark always stays on the element, so shoppers recognise that the same body works in every store.

## Live updates

Restyle without reloading anything, for example when your site switches to dark mode:

```ts
const dark = matchMedia("(prefers-color-scheme: dark)");
const apply = () =>
  elements.update({
    appearance: { variables: dark.matches ? { colorBackground: "#111", colorText: "#eee" } : {} },
  });
dark.addEventListener("change", apply);
```

In React, change `options.appearance` on `<TryYourSizeProvider>`: the provider calls `elements.update()` for you.

## Mobile

The native SDKs use the same variables:

| Variable | Web | iOS | Android |
|---|---|---|---|
| `theme` | `inherit` / `tryyoursize` | `.inherit` / `.tryyoursize` | `INHERIT` / `TRYYOURSIZE` |
| inherited text / background | computed style where mounted | `UIColor.label` / `.systemBackground` for the presenter (dark mode included) | theme `textColorPrimary` / `colorBackground` |
| `colorPrimary` | CSS colour | `TYSColor` (hex or `UIColor`) | ARGB `Int` |
| `fontFamily` | page font | CSS family for the window (default `-apple-system`); the button uses the SwiftUI environment font | CSS family (default `Roboto`); the button takes a `TextStyle` |
| `borderRadius` | px | points; also the sheet's corner radius | dp |
| `fonts` | Google Fonts `cssSrc` | `[URL]`, Google Fonts only | `List<String>`, Google Fonts only |

Live: `tys.appearance = …` (iOS, Android) or `setAppearance(...)` (Flutter) restyles an open window at once. React Native takes `#rrggbb` or `#rrggbbaa` colours in `configure()`.