# Appearance (theming)

> Theme the embedded screens with one brand colour, a corner radius, a font and light, dark or automatic mode.

Source: https://docs.nexafone.so/v1/web/appearance/

The embedded screens take your brand from four settings. Layout, spacing and screens never change: what users learn
in one product works in every other.

```js
Nexafon.init({
  publishableKey: 'pk_live_…',
  getUserToken,
  appearance: {
    primaryColor: '#16A34A',
    radius: 10,
    font: 'inter',
    colorMode: 'auto',
  },
})
```

| Setting | Values | Default |
| --- | --- | --- |
| `primaryColor` | A hex colour, `#RGB` or `#RRGGBB` | Nexafon blue |
| `radius` | Corner radius in px, 0 to 24 (rounded, clamped) | The kit’s radius |
| `font` | `'ibm_plex_sans'`, `'inter'` or `'system'` (your visitors’ system font) | `'ibm_plex_sans'` |
| `colorMode` | `'light'`, `'dark'` or `'auto'` (follows the device) | `'auto'` |

## One colour, readable everywhere

From `primaryColor` Nexafon derives the whole primary family (buttons, hover and pressed states, subtle
backgrounds, focus rings, links) for light and dark mode, and the text colour on each, so text stays readable at WCAG
AA contrast whatever colour you pass.

## Changing it at runtime

```js
// For example when your own app switches to dark mode.
Nexafon.setAppearance({ colorMode: 'dark' })
```

Settings you leave out keep their current value. Invalid values (a misspelled font, `radius: 'big'`) are ignored
rather than breaking the embed.

## Partners

A partner’s default appearance, set by Nexafon for the partner, applies to all of its stores’ embeds. Settings
passed to `init` or `setAppearance` win over it field by field.

## Language and direction

`locale: 'en' | 'so' | 'ar'` sets the language of the embedded screens. Arabic renders right to left; phone numbers,
codes and amounts stay left to right inside it.