Skip to main content
Version: v2.x

Theme Customization


To customize the NLUX theme, you can override the Nova theme variables.
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}
    />
  );
};

Learn More Theme Customization