Skip to main content
Version: v2.x

Theme Customization

Ways To Customize Theme

There are 2 ways to change the look and feel of the NLUX user interface:

Overriding Default Theme

You can override the default theme variables by adding a new CSS file that defines new values for those variables. The new variables should be defined in a CSS selector that has higher specificity than the default theme selector.

The default theme container selector is .nlux-AiChat-root.nlux-theme-nova, so you need to make sure that your CSS selector has higher specificity than that, e.g., .custom-ai-chat-comp.nluxc-root.nluxc-theme-nova.

You can check below for more details on the variables that can be overridden.

Creating New 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:

<AiChat displayOptions={{
themeId: 'ciel'
}} />

Variables To Override

You can find all Novo theme variables that can be overridden in the following files on GitHub:

  • colors.css All the colors that can be overridden.
  • variables.css All the other variables that can be overridden, including font size and family, border radius, etc.


In the example below, we changed the following details in thee Nova 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.

We also set the conversationOptions's layout to bubbles to display the messages in a bubble layout.

import {useMemo} from 'react';
import {AiChat} from '@nlux/react';
import '@nlux/themes/nova.css';
import {streamAdapter} from './adapter';
import {personas} from './personas';

// Theme variable overrides are defined in theme-overrides.css
import './theme-overrides.css';

export default () => {
  const adapter = useMemo(() => streamAdapter, []);
  return (
      // We can use the 'my-theme' class to increase specificity
      // and override the default theme variables
      conversationOptions={{layout: 'bubbles'}}
      displayOptions={{colorScheme: 'dark'}}


You can change code in the live code editor in this example.
Try updating theme-overrides.css and see the changes in the chatbot above.


CSS Selector

We start by creating a new CSS file called theme-overrides.css and add the following CSS selector:

.my-theme.nlux-AiChat-root.nlux-theme-nova {
/* Overrides will go here */

Notice that the second selector has higher specificity than the default theme selector, as it uses the my-theme class.

Chat Container

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

  /* Override top-level chat room colors */
--nlux-ChatRoom--BackgroundColor: #060524;
--nlux-ChatRoom--BorderColor: #24233d;
--nlux-ChatRoom-Divider--Color: #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:

  /* 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.
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:

  /* 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:

  /* Override icon for the send button */
--nlux-send-icon: url('data:image/svg+xml,\
<svg xmlns="" 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"/>\

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:

<link rel="stylesheet" href="./theme-overrides.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:

import './theme-overrides.css';