Customized Theme

To customize the NLUX theme, you can simply override the Nova theme variables.
In the example below, we are overriding 2 aspects of the Nova theme:

• Changing the primary color to #1f6adb (blue)
• Changing the border radius of inputs to 0px

The button and the sent messages will be blue, and the input will have sharp corners:

Learn More Theme Customization

Open Sandbox

import {useMemo} from 'react';
import {AiChat} from '@nlux/react';
import '@nlux/themes/nova.css';
import './custom-nova-theme.css';
import {streamAdapter} from './adapter';
import {user, botStyle} from './personas';

export default () => {
  const adapter = useMemo(() => streamAdapter, []);
  return (
    <AiChat
      className="custom-ai-chat-comp"
      adapter={adapter}
      personaOptions={{
        bot: {
          name: 'iBot',
          picture: <span style={botStyle}>🤖</span>,
          tagline: 'Your Genius AI Assistant'
        },
        user
      }}
      layoutOptions={{
        height: 320,
        maxWidth: 600
      }}
    />
  );
};