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.

Open 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 }
    />
  );
};

---

Learn More Theme Customization