---
sidebar_label: 'Theme Customization'
---


import {PlatformSelector} from '@site/src/components/PlatformSelector/PlatformSelector';
import {CodeEditor} from '@site/src/components/CodeEditor/CodeEditor';

import app from './_007-customize-theme/example-custom-button-color/app';
import send from './_007-customize-theme/example-custom-button-color/send';
import personas from './_007-customize-theme/example-custom-button-color/personas';
import themeVariables from './_007-customize-theme/example-custom-button-color/theme-variables';

import ThemeIdReactJs from './_007-customize-theme/#react/themeId.mdx';
import ThemeIdJavaScript from './_007-customize-theme/#js/themeId.mdx';

# Theme Customization

---

`NLUX` comes with a default theme called `nova` and an `unstyled` theme that provides a basic layout for the chat
interface with no styling or colors.

If you would like to fully customize the look and feel of the chat interface, you can import the `unstyled`
theme and set the CSS variables to match your design.

**Over 100 variables** are available for you to set the desired look and feel for your interface.

---

## Customizing The Unstyled Theme
You can create a new custom theme by creating a new CSS file that defines all the theme variables. You can then import
this CSS file in your HTML file or in your JavaScript/TypeScript file. You will also need to provide a theme ID to the
`AiChat` component as follows:

<PlatformSelector reactJs={ThemeIdReactJs} javascript={ThemeIdJavaScript}/>

This will enable setting CSS variables via the following CSS selectors:

```css
.nlux-theme-MyBrandName {
    /* Theme variables to set, with values that do not depend on color scheme */
}

.nlux-theme-MyBrandName[data-color-scheme='light'] {
    /* Values specific to light mode */
}

.nlux-theme-MyBrandName[data-color-scheme='dark'] {
    /* Values specific to dark mode */
}
```

---

## Setting Theme Variables

You can find **all the possible variables** that can be set in the following files on GitHub:
* [`colors.css`](https://github.com/nlkitai/nlux/blob/latest/packages/css/themes/src/dev/colors.css) All the colors
that can be overridden.
* [`layout.css`](https://github.com/nlkitai/nlux/blob/latest/packages/css/themes/src/dev/layout.css) All the other
variables that can be set, including layout, font size and family, border radius, etc.

---

## Example

In the example below, we changed the following details in the `unstyled` theme:

* Component background color set `#060524` (Dark blue)
* Assistant message background color set to `#5F9EA0` (Cadet blue)
* User message background color set to `#DC143C` (Crimson)
* Border radius set to `5px`
* Send icon replaced with a custom SVG icon.

<CodeEditor
    files={{
        'App.tsx': app,
        'theme-variables.css': themeVariables,
        'personas.tsx': personas,
        'send.ts': send,
    }}
    editorHeight={380}
    simulatedPrompt={'Do you think we could have a thoughtful debate about physics with ChatGPT?'}
/>

<br />

:::info
You can change code in the live code editor in this example.<br />
Try updating `theme-variables.css` and see the changes in the chatbot above.
:::

---

## Explanation

---

> ### CSS Selectors

One CSS selector `.nlux-theme-MyBrandName` is required to set the theme variables. The value `MyBrandName` should match
the `displayOptions.themeId` prop passed to the `AiChat` component.

If you are using the dark and light modes, you can also use the data selectors `[data-color-scheme='light']` and
`[data-color-scheme='dark']` to set the variables specific to each mode.

Is this example, we change the background color of the chat room based on dark/light mode options.

---

> ### Chat Container

Then we override the variables in the CSS file related to the main component's background color:

```css
  /* Override top-level chat room colors */
  --nlux-ChatRoom--BackgroundColor: #060524;
  --nlux-ChatRoom--BorderColor: #24233d;
  --nlux-ChatRoom--BorderColor: #24233d;
  --nlux-ChatRoom--BorderWidth: 2px;
```

All the variables that start with `--nlux-ChatRoom` are related to the container of the chat room.

---

> ### Message Bubbles

We provide custom background for the user and the assistant messages by overrides the following variables:

```css
  /* Override message bubble colors */
  --nlux-AiMessage--BackgroundColor: #00BFFF;
  --nlux-HumanMessage--BackgroundColor: #DC143C;
```

---

> ### Input And Submit Button

We also override the input and submit button colors.<br />
Those 2 elements have 3 states:

* `Normal`: When the input is not focused or hovered, and not disabled.
* `Active`: When the input is focused or hovered.
* `Disabled`: When the input is disabled.

Each state can be overridden separately as follows:

```css
  /* Override input colors */
  --nlux-PromptInput--BackgroundColor: #161620;
  --nlux-PromptInput-Active--BackgroundColor: #161620;
  --nlux-PromptInput-Disabled--BackgroundColor: #161620;

  /* Override submit button colors */
  --nlux-SubmitButton--BackgroundColor: #161620;
  --nlux-SubmitButton-Active--BackgroundColor: #24233d;
  --nlux-SubmitButton-Disabled--BackgroundColor: #161620;
```

---

> ### Submit Icon

Finally, we replace the default send icon with a custom SVG icon:

```css
  /* Override icon for the send button */
  --nlux-send-icon: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" \
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\
      <circle cx="12" cy="12" r="10"/>\
      <path d="M16 12l-4-4-4 4M12 16V9"/>\
    </svg>\
  ');
```

The `url` function is used to provide the SVG icon as a data URL.

---

> ### Importing CSS

You can add the following to your HTML file to import the relevant CSS files:

```html
<link rel="stylesheet" href="./theme-variables.css" />
```

or if you are using a bundler that's configured to load CSS, you can just import the CSS file in your JSX/TSX file:

```js
import './theme-variables.css';
```
