# Theming, locale & z-index

> Match the widget to your brand with theme colors, fonts, locale, and z-index control.

Source: https://docs.useclad.ai/theming

---

```ts
chat.setTheme({
  mode: "system",                // "light" | "dark" | "system"
  colors: {
    primary: "#4f46e5",
    background: "#ffffff",
    surface: "#f8fafc",
    text: "#0f172a",
    mutedText: "#64748b",
    userMessage: "#4f46e5",
    agentMessage: "#f1f5f9",
    danger: "#dc2626",
  },
  borderRadius: "lg",            // none | sm | md | lg | xl | <css length>
  fontFamily: "Inter, system-ui, sans-serif",
});

chat.setLocale("en-US");
chat.setZIndex(999999);
```

You can also set defaults in `window.SupportChatSettings` (or
`SupportChat.createChat`), or in your workspace admin.

<div class="img-ph">
  <span class="img-ph__badge">📷 Screenshot needed</span>
  <p class="img-ph__title">A themed widget</p>
  <p class="img-ph__desc">The widget styled to match a brand — custom primary color, font, and rounded corners — ideally next to the default look, to show what theming achieves.</p>
</div>