> ## Documentation Index
> Fetch the complete documentation index at: https://docs.concatflow.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme, accent and placeholder

> Match the assistant to your product: light or dark, your accent colour, your own prompt.

Appearance is set in two places. The dashboard styles the assistant itself. Your page styles the launcher, which shows before the assistant loads.

| Setting | Dashboard (**Appearance** tab) | Page option |
| - | - | - |
| Theme | Default theme of the assistant | `theme` overrides it, unless `"auto"` |
| Accent | Buttons and highlights inside the assistant | `accent` colours the bar's magnifier and focus ring |
| Prompt | Placeholder of the bubble panel's input | `placeholder` is the bar's placeholder |

## Theme

```js theme={"system"}
Concatflow.init({ siteToken: "st_YOUR_SITE_TOKEN", launcher: "bar", theme: "dark" });
```

```html theme={"system"}
<concatflow-assistant site-token="st_YOUR_SITE_TOKEN" launcher="bar" theme="dark"></concatflow-assistant>
```

| Value | Effect |
| - | - |
| `"auto"` (default) | Uses the dashboard's theme. If that is `auto` too, follows the visitor's system setting. |
| `"light"` | Always light. |
| `"dark"` | Always dark. |

If your app has its own dark mode toggle, pass the current mode. In React, the assistant is recreated when `theme` changes:

```tsx theme={"system"}
import { ConcatflowAssistant } from "@concatflow/embed/react";

<ConcatflowAssistant siteToken="st_YOUR_SITE_TOKEN" launcher="bar" theme={isDark ? "dark" : "light"} />;
```

## Accent

```js theme={"system"}
Concatflow.init({ siteToken: "st_YOUR_SITE_TOKEN", launcher: "bar", accent: "#0E7C66" });
```

`accent` is any CSS colour. It colours the bar's magnifier and its focus ring. Without it, they use the text colour.

Inside the assistant, the accent comes from the dashboard. Concatflow darkens it, keeping its hue, until white text on it reaches a 4.5:1 contrast ratio. A light brand colour stays readable on buttons.

## Placeholder

```js theme={"system"}
Concatflow.init({
  siteToken: "st_YOUR_SITE_TOKEN",
  launcher: "bar",
  placeholder: "Search listings, prices, neighbourhoods…",
});
```

The bar is drawn by `widget.js` in your page, before the assistant has loaded. So its placeholder comes from your page, not from the dashboard.

> [!NOTE]
>
> The default placeholder is in French: `Posez une question…`. Set `placeholder` if your product is in another language. The bubble panel uses the prompt from the dashboard's **Appearance** tab, with the same default.

## What you cannot change

The assistant renders in an iframe, inside a Shadow DOM. Your CSS cannot reach it. This is on purpose: your styles cannot break it, and it cannot break yours.

Size and place the **bar** through its container. The bubble always sits in the bottom-right corner.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.