c.l.cladDocs

Theming, locale & z-index

View as Markdown

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

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.

📷 Screenshot needed

A themed widget

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.