Skip to main content
Version: v2.x

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:

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

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

.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 All the colors that can be overridden.
  • 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.
Open on CodeSandboxOpen Sandbox
import { AiChat, useAsStreamAdapter } from '@nlux/react';
import { send } from './send';
import { personas } from './personas';

// We import the unstyled CSS that gives us the basic layout and structure
import '@nlux/themes/unstyled.css';

// We set the variables in a separate CSS file
import './theme-variables.css';

export default () => {
  const adapter = useAsStreamAdapter(send, []);
  return (
    <AiChat
      displayOptions={{
        themeId: 'MyBrandName',
        colorScheme: 'dark'
      }}
      personaOptions={ personas }
      adapter={ adapter }
    />
  );
};

info

You can change code in the live code editor in this example.
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:

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

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

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

import './theme-variables.css';