# Themes

[Open in workspace →](/workspace/_/settings/messenger/themes)

Customize the messenger widget to match your brand. Themes are configured in the dashboard under [**Settings > Messenger > Themes**](/workspace/_/settings/messenger/themes).

## Creating a theme

Each theme has the following options:

| Option            | Description                                                              |
| ----------------- | ------------------------------------------------------------------------ |
| Name              | Theme identifier                                                         |
| Mode              | Light or Dark                                                            |
| Primary color     | Brand color used for the launcher, message bubbles, and buttons          |
| Launcher position | Bottom offset and left/right placement                                   |
| Launcher icon     | Optional custom image for the launcher button                            |
| Auto activation   | When this theme should activate: Always, Light only, Dark only, or Never |

## Light and dark themes

You can assign a light theme and a dark theme for your workspace. When both are configured, the widget automatically switches based on the user's system preference.

## Switching themes at runtime

Use the [JavaScript SDK](/docs/api-reference/javascript-sdk/#settheme) to switch between named themes:

```js
optlo.setTheme("dark");
```

This switches to the theme with the matching name from your dashboard configuration.

You can also force a theme using the `data-theme` attribute on the container element. See [Installation](/docs/messenger/installation/#theme).