## Choose a Theme

Customize the Appearance of Your Chat Interface

# Customizing Themes in Superexpert.AI

Superexpert.AI allows you to fully customize the look of your chat interfaces by selecting, modifying, or creating themes.

## Selecting a Theme

To select a theme for your chat interface:

1. Click the **Agents** menu from the main navigation.
2. Click on the **Tasks** button next to the agent you wish to customize.
3. Expand the **Theme** section and select your desired theme.

_Figure 1: Selecting a theme from the dropdown._

By default, tasks inherit the theme set in the `global` task. You can override this setting individually for each task.

## Modifying an Existing Theme

Superexpert.AI themes are managed via CSS modules located in the `themes/chat-bot` folder. To modify an existing theme, follow these steps:

1. Open the relevant CSS module file (e.g., `default.module.css`).
2. Update the CSS rules as desired. For example, changing the background color of the Default theme:

```
.chatPage {
    @apply flex flex-col min-h-screen bg-pink-50 text-lg;
    font-family: 'Inter', sans-serif;
}
```

The above example sets the page background to pink using Tailwind classes.

_Figure 2: Theme modified to have a pink background._

Superexpert.AI uses Tailwind CSS, but you can use standard CSS if preferred.

To modify the HTML structure (such as the logo or adding new elements), edit the `app/(chat)/ui/chat-bot.tsx` ReactJS file.

## Creating a New Custom Theme

To create a new theme from scratch:

### Step 1: Create a New CSS Module

Create a new CSS file in the `themes/chat-bot` directory, for example `super.module.css`, and define your styles:

```
.chatPage {
    @apply flex flex-col min-h-screen bg-indigo-50 text-gray-900;
    font-family: 'Roboto', sans-serif;
}
```

### Step 2: Register Your Theme

Add your new theme to `themes/chat-bot/themes.ts`:

```
import stylesSuper from '@/themes/chat-bot/super.module.css';

registerTheme({
    id: 'super',
    description: 'A professional, clean Superexpert.AI theme.',
    name: 'Super Theme',
    imagePreview: '/themes/super/super-preview.png',
    theme: stylesSuper,
});
```

Make sure you place a preview image in `public/themes/super/` to visually represent your theme in the interface.

After completing these steps, your custom theme becomes available for selection:

_Figure 3: Applying your custom theme._

## Sharing Themes via NPM

You can package and share your Superexpert.AI themes as NPM modules. For detailed instructions, refer to the [Create Custom Plugins](/content/docs/create-custom-plugins/index.html) documentation.

## Have questions?

Post a message to the [Superexpert.AI Discord Server](https://discord.gg/wsrc3enWN3)