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.

Example

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 (
    <AiChat
      // We can use the 'my-theme' class to increase specificity
      // and override the default theme variables
      className="my-theme"
      conversationOptions={{layout: 'bubbles'}}
      displayOptions={{colorScheme: 'dark'}}
      personaOptions={personas}
      adapter={adapter}
    />
  );
};

info

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.


Explanation


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 */
}
Important

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="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-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';