Apariencia y temas

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:

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:

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().