# 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

```css
: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**

```css
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**

```css
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

```tsx
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

```css
.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

```css
@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

```tsx
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.

{% embed url="<https://jsfiddle.net/8rw6mpy1/>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aisuru.com/en/frontend/style-and-customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.