Skip to main content
Version: v2.x

Theme Customization

NLUX comes with 2 themes: nova and unstyled.

In the example below, we style the unstyled theme by changing the following details:

  • Border with set to 0
  • Border radius set to 5px
  • Send icon replaced with a custom SVG icon.
  • User message background color set to #dc143c (Crimson)
  • Assistant message background color set to #00bfff (Cadet blue)
  • Component background color set #060524 (Dark blue) or #f9f9f9 (Light gray) depending on dark/light mode.
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 }
    />
  );
};


Learn More Theme Customization