🎨Style and Customization

Overview

Memori offers several ways to customize the appearance and behavior of the widget, letting you tailor it to fit your website or application's design. Customizations can be applied through CSS variables, custom layouts, and component overrides.

CSS Variables

The customization system is primarily based on CSS variables that control colors, dimensions, spacing, and other visual aspects of the widget.

Base Variables

:root {
  /* Primary colors */
  --memori-primary: rgb(102, 103, 171);
  --memori-primary-text: #fff;
  --memori-text-color: #000;
  
  /* Background and containers */
  --memori-inner-bg: transparent;
  --memori-chat-bubble-bg: #ffffff60;
  --memori-blur-background: 0px;
  
  /* Buttons */
  --memori-button-bg: #fff;
  --memori-button-text: #000;
  --memori-button-radius: 5px;
  --memori-button-padding: 0.5rem 1.5rem;
  --memori-button-border-color: #d9d9d9;
  --memori-button-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
  
  /* Drawer and Modal */
  --memori-drawer--width: 100%;
  --memori-drawer--width--md: 80%;
  --memori-drawer--width--lg: 60%;
  --memori-modal--width: 100%;
  --memori-modal--width--md: 80%;
  
  /* States */
  --memori-error-color: #ff4d4f;
}

Customization Examples

Dark Theme

memori-client,
#headlessui-portal-root,
.memori-widget {
  --memori-primary: #2d3748;
  --memori-primary-text: #ffffff;
  --memori-inner-bg: #1a202c;
  --memori-chat-bubble-bg: #2d3748;
  --memori-text-color: #e2e8f0;
  --memori-button-bg: #4a5568;
  --memori-button-text: #ffffff;
  --memori-blur-background: 8px;
}
.memori-button {
  background-color: #4a5568;
  color: #ffffff;
}
.memori--title {
  color: #ffffff;
}
.memori-chat--bubble {
  background-color: #ffffff;
  color: #1a202c;
}
.memori-button-icon {
  color: #fff;
}
.memori-chat-inputs--mic svg {
  fill: #fff;
}

Light Theme

i-client,memori-client,
#headlessui-portal-root,
.memori-widget {
  --memori-primary: #6366f1;
  --memori-primary-text: #ffffff;
  --memori-inner-bg: #f8fafc;
  --memori-chat-bubble-bg: #f1f5f9;
  --memori-text-color: #1e293b;
  --memori-button-bg: #ffffff;
  --memori-button-text: #1e293b;
  --memori-button-radius: 12px;
  --memori-blur-background: 0px;
}
.memori-button {
  background-color: #ffffff;
  color: #1e293b;
}
.memori--title {
  color: #1e293b;
}
.memori-chat--bubble {
  background-color: #ffffff;
  color: #1e293b;
}
.memori-chat-inputs--mic svg {
  fill: #1e293b;
}

Custom Layouts

You can define fully custom layouts using the React component.

Basic Example

const CustomLayout: React.FC<LayoutProps> = ({
  Avatar,
  Chat,
  StartPanel,
  sessionId,
  hasUserActivatedSpeak,
  avatarProps,
  chatProps,
  startPanelProps
}) => (
  <div className="custom-layout">
    <div className="avatar-section">
      <Avatar {...avatarProps} />
    </div>
    <div className="main-content">
      {sessionId && hasUserActivatedSpeak ? (
        <Chat {...chatProps} />
      ) : (
        <StartPanel {...startPanelProps} />
      )}
    </div>
  </div>
);

Layout-Specific Styles

.custom-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  padding: 20px;
  height: 100%;
}

.avatar-section {
  background: var(--memori-inner-bg);
  border-radius: 10px;
  padding: 20px;
}

.main-content {
  background: var(--memori-chat-bubble-bg);
  border-radius: 10px;
  overflow: hidden;
}

Responsive Customization

@media (max-width: 768px) {
  .memori-widget {
    --memori-drawer--width: 100%;
    --memori-modal--width: 100%;
  }
  
  .custom-layout {
    grid-template-columns: 1fr;
  }
}

Component Overrides

You can override the default components for even deeper customization.

Example: Custom Chat Bubble

const CustomChatBubble: React.FC<ChatBubbleProps> = ({
  message,
  isUser,
  timestamp
}) => (
  <div className={`custom-bubble ${isUser ? 'user' : 'bot'}`}>
    <div className="message">{message}</div>
    <div className="timestamp">{timestamp}</div>
  </div>
);

Best Practices

1. Maintain Consistency

   • Use colors and styles consistent with your brand;

   • Keep the same palette throughout the widget.

2. Accessibility

   • Ensure sufficient contrast between text and background;

   • Keep font sizes readable;

   • Consider users with visual impairments.

3. Responsive Design

   • Test on different devices and screen sizes;

   • Use appropriate breakpoints;

   • Adapt layouts and dimensions for mobile devices.

4. Performance

   • Avoid heavy animations;

   • Optimize images and assets;

   • Minimize the use of complex CSS filters and effects.

Demo

We put together a demo showing a theme customization example using the "Giuseppe Verdi" Agent. Feel free to tweak the style to your liking.