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

# Colors

> How to customize colors in Atoti UI by registering custom themes via configuration.themes in index.ts, selecting them via the CoreSettings theme property in the Settings popup, and applying a ThemeProvider in standalone React integrations.

The colors of a user or group of users can be configured using the `theme` setting. The valid values for this setting are *"light-activeviam"*, *"dark-activeviam"* and the keys of the registered custom themes. See [**CoreSettings**](../../reference/types#coresettings)

## Create a custom theme

This section applies if you are using the Atoti UI starter. If you are not, then read [Use a custom theme in Atoti UI components integrated into a different application](#use-a-custom-theme-in-atoti-ui-components-integrated-into-a-different-application). If you plan to use the Atoti UI starter but don't know how to, read [Setup](../../install-and-start/set-up) first then come back here.

In order to create a custom theme, add its definition to your `activate` function in `index.ts`:

```ts theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
configuration.themes["custom"] = {
  primaryColor: "#9900ff",
};
```

This is a basic example. Refer to [Theme](../../reference/types#theme) for a list of all the attributes that can be configured in this file.

<Note>
  The key of your theme is up to you, it does not have to be `"custom"`.
</Note>

### Use a custom theme

Once registered, your custom theme appears in the [Settings popup](../../../user-guide/navigate-atoti-ui/settings#open-the-settings-popup) alongside the built-in Light and Dark themes and can be selected from there. You can also set its key as your `theme` setting. See [Settings](../user-settings).

### Custom theme thumbnail

To provide a preview image for your theme in the **Settings** popup, add a PNG file named after your theme key to the `public/` folder of your project:

```
{themeKey}-theme.png
```

For example, for a theme registered as `"custom"`, the file should be named `custom-theme.png`.

<Note>
  The image is rendered at **160×86px**. You should provide it at a higher
  resolution (the built-in thumbnails are around 512×275px).
</Note>

## Use a custom theme in Atoti UI components integrated into a different application

This more advanced section is only useful if you are **NOT** using the Atoti UI starter.

To use a custom theme in Atoti UI components integrated into a different application, add a [ThemeProvider](../../reference/context-providers#themeprovider) above these components:

```tsx theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
import { ThemeProvider } from "@activeviam/atoti-ui-sdk";

const customTheme = {
  primaryColor: "#9900ff",
};

return (
  <ThemeProvider value={customTheme}>
    <App />
  </ThemeProvider>
);
```