Appearance and theming

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:

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:

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