# Apariencia y temas

> Los elementos de TryYourSize heredan por defecto la fuente y los colores de tu página. Cámbialos con variables de apariencia, en directo.

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

Por defecto, cada elemento **hereda el estilo de tu página**: la fuente, el color del texto y el fondo del lugar donde se monta, con los botones en tu color de texto (como el botón principal de la mayoría de las tiendas). Normalmente no necesitas aplicar ningún estilo.

## API de apariencia

Igual que con la Appearance API de Stripe, pasa `appearance` al crear el grupo de elementos:

```ts
const elements = tys.elements({
  appearance: {
    theme: "inherit",            // por defecto; o "tryyoursize" (nuestra marca en beige claro)
    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" }], // solo Google Fonts
  },
  locale: "auto",
});
```

| Variable | Se usa para |
|---|---|
| `colorPrimary` | Botones y acentos; el punto de "conectado" de la guía de tallas |
| `colorBackground` | Fondo del elemento y de la ventana |
| `colorText` | Texto |
| `fontFamily` | Texto del elemento y de la ventana |
| `borderRadius` | Esquinas (px); la guía de tallas lo usa con `variant: "button"` |

La marca de TryYourSize siempre permanece en el elemento, para que quien compra reconozca que el mismo cuerpo sirve en todas las tiendas.

## Cambios en directo

Cambia el estilo sin recargar nada, por ejemplo cuando tu sitio pasa a modo oscuro:

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

En React, cambia `options.appearance` en `<TryYourSizeProvider>`: el provider llama a `elements.update()` por ti.

## Móvil

Los SDK nativos usan las mismas variables:

| Variable | Web | iOS | Android |
|---|---|---|---|
| `theme` | `inherit` / `tryyoursize` | `.inherit` / `.tryyoursize` | `INHERIT` / `TRYYOURSIZE` |
| texto / fondo heredados | estilo calculado donde se monta | `UIColor.label` / `.systemBackground` del presentador (modo oscuro incluido) | `textColorPrimary` / `colorBackground` del tema |
| `colorPrimary` | color CSS | `TYSColor` (hex o `UIColor`) | `Int` ARGB |
| `fontFamily` | fuente de la página | familia CSS para la ventana (por defecto `-apple-system`); el botón usa la fuente del entorno de SwiftUI | familia CSS (por defecto `Roboto`); el botón acepta un `TextStyle` |
| `borderRadius` | px | puntos; también el radio de las esquinas de la hoja | dp |
| `fonts` | `cssSrc` de Google Fonts | `[URL]`, solo Google Fonts | `List<String>`, solo Google Fonts |

En directo: `tys.appearance = …` (iOS, Android) o `setAppearance(...)` (Flutter) cambia el estilo de una ventana abierta al instante. React Native acepta colores `#rrggbb` o `#rrggbbaa` en `configure()`.