Skip to main content

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
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 (
        bot: {
          name: 'iBot',
          picture: <span style={botStyle}>🤖</span>,
          tagline: 'Your Genius AI Assistant'
        height: 320,
        maxWidth: 600