Web UI Customization

📋 Planned

Documentation Under Construction

This page will explain how to customize the appearance and behavior of the Vanna web UI, including CSS variables, theming, and component customization.

Planned Content

✓ CSS variables for theming
✓ Custom color schemes
✓ Typography customization
✓ Layout and spacing adjustments
✓ Custom icons and branding
✓ Dark mode support
✓ Component-level customization
✓ Complete theme examples

Want to contribute or suggest improvements? Open an issue on GitHub

Customization Options

When complete, this will show:

CSS Variables

vanna-chat {
    --vanna-primary-color: #007bff;
    --vanna-background-color: #ffffff;
    --vanna-text-color: #333333;
    --vanna-border-radius: 8px;
    --vanna-font-family: 'Inter', sans-serif;
}

Custom Theme Example

/* Dark mode theme */
vanna-chat.dark-theme {
    --vanna-primary-color: #4a9eff;
    --vanna-background-color: #1a1a1a;
    --vanna-text-color: #e0e0e0;
    --vanna-surface-color: #2a2a2a;
    --vanna-border-color: #404040;
}

Branding Customization

Custom logo placement
Brand colors
Custom message styling
Loading states and animations

Component Customization

Table styling
Chart colors and themes
Button styles
Input field appearance
Message bubbles