> For the complete documentation index, see [llms.txt](https://docs.ibexa.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ibexa.ai/developers/assistant/customizing-appearance.md).

# Customizing Appearance

The appearance of the AI Assistant can be customized to match your application's design and branding. This documentation provides an overview of the different ways you can customize the look and feel of the assistant, including CSS variables, overriding CSS classes, and confirmation and error handlers.

## CSS Variables

CSS variables are the primary method for customizing the appearance of the assistant. You can override these variables in your own CSS to customize the appearance of the documentation. For example, to change the text color and background color you can add the following CSS to your stylesheet:

```css
:root {
    --ibexa-ai-assistant-color-text: #4a2dd4;
    --ibexa-ai-assistant-color-background: #f5eaea;
}
```

Here are some of the CSS variables you can customize:

| Variable                                     | Description                                                             |
| -------------------------------------------- | ----------------------------------------------------------------------- |
| `--ibexa-ai-assistant-color-primary`         | Primary brand color used for accent elements and interactive components |
| `--ibexa-ai-assistant-color-bg-window`       | Background color for the main chat window                               |
| `--ibexa-ai-assistant-color-bg-message`      | Background color for assistant messages                                 |
| `--ibexa-ai-assistant-color-bg-message-user` | Background color for user messages                                      |
| `--ibexa-ai-assistant-color-bg-alt`          | Alternative background color for secondary elements                     |
| `--ibexa-ai-assistant-color-bg-surface`      | Background color for surface elements                                   |
| `--ibexa-ai-assistant-color-border`          | Color for borders and dividers                                          |
| `--ibexa-ai-assistant-color-text`            | Primary text color                                                      |
| `--ibexa-ai-assistant-color-bg-sidebar`      | Background color for sidebar                                            |
| `--ibexa-ai-assistant-chat-window-width`     | Width of the chat window                                                |
| `--ibexa-ai-assistant-chat-window-height`    | Height of the chat window                                               |
| `--ibexa-ai-assistant-avatar-size`           | Size of avatar images                                                   |
| `--ibexa-ai-assistant-svg-size-tiny`         | Tiny icon size                                                          |
| `--ibexa-ai-assistant-svg-size-small`        | Small icon size                                                         |
| `--ibexa-ai-assistant-svg-size-medium`       | Medium icon size                                                        |
| `--ibexa-ai-assistant-svg-size-large`        | Large icon size                                                         |
| `--ibexa-ai-assistant-shadow`                | Box shadow for elevated elements                                        |
| `--ibexa-ai-assistant-spacing-xs`            | Extra small spacing unit                                                |
| `--ibexa-ai-assistant-spacing-sm`            | Small spacing unit                                                      |
| `--ibexa-ai-assistant-spacing-md`            | Medium spacing unit                                                     |
| `--ibexa-ai-assistant-spacing-lg`            | Large spacing unit                                                      |
| `--ibexa-ai-assistant-border-radius-sm`      | Small border radius                                                     |
| `--ibexa-ai-assistant-border-radius-md`      | Medium border radius                                                    |
| `--ibexa-ai-assistant-border-radius-lg`      | Large border radius                                                     |
| `--ibexa-ai-assistant-font-family`           | Primary font family stack                                               |
| `--ibexa-ai-assistant-font-family-alt`       | Alternative font family stack                                           |
| `--ibexa-ai-assistant-font-size-sm`          | Base font size                                                          |
| `--ibexa-ai-assistant-font-size-title`       | Title font size                                                         |
| `--ibexa-ai-assistant-line-height`           | Base line height for text                                               |
| `--ibexa-ai-assistant-transition-fast`       | Fast transition timing for animations                                   |

You can find the full list of CSS variables in the [source code](https://github.com/ibexa/ai-assistant-ui/blob/main/lib/styles/theme.css).

## Overriding CSS Classes

In addition to CSS variables, you can also override specific CSS classes to customize the appearance of certain elements. For example, to change the appearance of the chat window header, you can target the `.ibexa-ai-assistant-header` class in your CSS:

```css
.ibexa-ai-assistant-header {
    background-color: #4a2dd4;
    color: #ffffff;
    font-size: 1.5rem;
}
```

## Confirmation and Error Handlers

In order to provide a more seamless user experience, the assistant supports confirmation and error handlers that can be customized to display messages in a way that fits your application's design. You can implement these handlers in your JavaScript code to show custom messages or modals when certain actions are performed or when errors occur.

For example, you can create a custom confirmation dialog that matches your application's style and use it in the assistant's configuration:

```javascript
const errorHandler = (error) => {
    // Display a custom error message to the user
    console.error('An error occurred:', error);
};

// ...
```

```jsx
<Assistant onError={errorHandler} ... />
```

See the `Confirmation Handler` and `Error Handler` sections in the [Options](/developers/assistant/options.md) page for more details on how to implement these handlers.