🎉 Syllabi - Open Source AI Chatbot Platform. Check it out →
docs
User Guide
Customizing Theme

Customizing Theme

Learn how to customize your chatbot's appearance to match your brand.

Overview

Syllabi's theme system allows you to:

  • 🎨 Customize colors (primary, background, message bubbles)
  • 🖼️ Upload custom logo
  • 🔤 Change fonts
  • 📱 Preview changes in real-time
  • 💾 Save and reuse themes across chatbots

Accessing Theme Settings

  1. Go to your chatbot dashboard
  2. Click Theme tab
  3. Choose Use Existing Theme or Create New Theme

Color Customization

Primary Color

Main brand color used throughout the interface:

Primary Color: #007bff

Used for:

  • Send button
  • Links and accents
  • Active states
  • User message bubbles (by default)

Examples:

  • Blue: #007bff (professional)
  • Green: #28a745 (eco, health)
  • Purple: #6f42c1 (creative)
  • Red: #dc3545 (urgent, bold)

Background Color

Main chat interface background:

Background Color: #ffffff

Options:

  • White: #ffffff (clean, modern)
  • Light gray: #f8f9fa (subtle, easy on eyes)
  • Dark: #1a1a1a (dark mode)

User Message Bubble

Customize messages sent by users:

Background Color: #007bff Text Color: #ffffff

Popular combinations:

Blue bubble, white text:
Background: #007bff
Text: #ffffff

Light bubble, dark text:
Background: #e9ecef
Text: #212529

Gradient (using custom CSS):
Background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
Text: #ffffff

Bot Message Bubble

Customize messages from the AI:

Background Color: #f0f0f0 Text Color: #000000

Popular combinations:

Light gray bubble:
Background: #f0f0f0
Text: #000000

White with border:
Background: #ffffff
Text: #000000
Border: 1px solid #dee2e6

Colored:
Background: #d4edda
Text: #155724

Logo Upload

Requirements

  • Format: PNG, JPG, or SVG
  • Size: Max 2MB
  • Dimensions: 200x50px recommended (auto-resized)
  • Transparency: PNG with transparency works best

Upload Process

  1. Theme tab → Logo section
  2. Click Upload Logo
  3. Select image file
  4. Preview in chat interface
  5. Click Save Theme

Logo Placement

Logo appears in:

  • Top-left of chat interface
  • Chatbot share page
  • Embedded widget header

Best Practices

✅ Do:

  • Use transparent background (PNG)
  • Ensure good contrast with header
  • Test on mobile devices
  • Keep it simple and recognizable

❌ Avoid:

  • Very detailed logos (hard to read when small)
  • Low-resolution images
  • Heavy file sizes
  • Logos with text that's too small

Font Customization

Available Fonts

Choose from:

  • Inter (default) - Modern, clean
  • Roboto - Friendly, approachable
  • Open Sans - Professional, readable
  • Lato - Elegant, corporate
  • Poppins - Bold, contemporary
  • Montserrat - Geometric, modern

How to Change

  1. Font Family dropdown
  2. Select font
  3. Preview in real-time
  4. Save theme

Custom Fonts

Load custom fonts via Custom CSS:

@import url('https://fonts.googleapis.com/css2?family=YourFont:wght@400;600&display=swap');
 
body {
  font-family: 'YourFont', sans-serif;
}

Theme Presets

Light Theme (Default)

Primary: #007bff
Background: #ffffff
User Bubble: #007bff / #ffffff
Bot Bubble: #f0f0f0 / #000000
Font: Inter

Dark Theme

Primary: #0d6efd
Background: #1a1a1a
User Bubble: #0d6efd / #ffffff
Bot Bubble: #2d2d2d / #e0e0e0
Font: Inter

Warm Theme

Primary: #ff6b35
Background: #fff8f0
User Bubble: #ff6b35 / #ffffff
Bot Bubble: #ffe8d6 / #333333
Font: Poppins

Corporate Blue

Primary: #003d82
Background: #ffffff
User Bubble: #003d82 / #ffffff
Bot Bubble: #e6f2ff / #003d82
Font: Roboto

Nature Green

Primary: #2d6a4f
Background: #f8fff8
User Bubble: #2d6a4f / #ffffff
Bot Bubble: #d8f3dc / #1b4332
Font: Lato

Advanced Customization

Custom CSS

Add custom CSS for fine-grained control:

  1. Theme tab → Custom CSS section
  2. Add CSS rules
  3. Preview changes
  4. Save

Examples:

Rounded message bubbles:

.message-bubble {
  border-radius: 20px;
}

Custom shadows:

.message-bubble {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Gradient background:

.chat-background {
  background: linear-gradient(180deg, #ffffff 0%, #f0f8ff 100%);
}

Custom scrollbar:

.chat-container::-webkit-scrollbar {
  width: 8px;
}
 
.chat-container::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 4px;
}

Animate message entry:

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
 
.message-bubble {
  animation: slideIn 0.3s ease;
}

CSS Variables

Override CSS variables for consistent theming:

:root {
  --primary-color: #007bff;
  --background-color: #ffffff;
  --user-bubble-bg: #007bff;
  --user-bubble-text: #ffffff;
  --bot-bubble-bg: #f0f0f0;
  --bot-bubble-text: #000000;
  --border-radius: 12px;
  --font-family: 'Inter', sans-serif;
  --transition-speed: 0.2s;
}

Managing Themes

Saving Themes

  1. Customize colors, logo, fonts
  2. Click Save as New Theme
  3. Name your theme: "Brand Theme 2024"
  4. Theme saved to your account

Reusing Themes

  1. Create new chatbot
  2. Theme tab → Use Existing Theme
  3. Select saved theme
  4. Applied instantly

Editing Themes

  1. Themes section in dashboard
  2. Select theme to edit
  3. Make changes
  4. Save (updates all chatbots using this theme)

Deleting Themes

  1. Themes section
  2. Click Delete on theme
  3. Confirm deletion
  4. Chatbots revert to default theme

Mobile Optimization

Themes automatically adapt to mobile devices:

Considerations:

  • Logo resizes for smaller screens
  • Touch-friendly button sizes
  • Readable font sizes (minimum 14px)
  • Proper spacing for thumbs

Test on mobile:

  1. Open chat on phone
  2. Verify logo is visible
  3. Check message bubbles are readable
  4. Test send button is easy to tap

Accessibility

Color Contrast

Ensure sufficient contrast for readability:

WCAG AA Standard:

  • Normal text: 4.5:1 contrast ratio
  • Large text: 3:1 contrast ratio

Tools:

Examples:

✅ Good contrast:

White text on blue (#007bff): 6.32:1 ✓
Black text on light gray (#f0f0f0): 15.89:1 ✓

❌ Poor contrast:

Light gray text on white: 1.4:1 ✗
Yellow text on white: 1.3:1 ✗

Font Size

Minimum recommended sizes:

  • Body text: 14px (mobile), 16px (desktop)
  • Small text: 12px minimum
  • Buttons: 16px minimum

Focus States

Ensure interactive elements have visible focus states:

button:focus,
input:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

White Labeling

Remove Syllabi branding:

  1. Upload your logo
  2. Customize all colors
  3. Settings → Remove "Powered by Syllabi" (if available)
  4. Use custom domain

Complete white-label experience:

✓ Your logo
✓ Your colors
✓ Your fonts
✓ Your domain
✓ No Syllabi branding

Theme Gallery

E-commerce

/* Modern shopping assistant */
Primary: #000000
Background: #ffffff
User: #000000 / #ffffff
Bot: #f5f5f5 / #000000
Font: Helvetica Neue

Healthcare

/* Calming medical assistant */
Primary: #2e7d9a
Background: #f0f8ff
User: #2e7d9a / #ffffff
Bot: #e6f3f9 / #1a5570
Font: Open Sans

Education

/* Friendly tutor bot */
Primary: #7c3aed
Background: #faf5ff
User: #7c3aed / #ffffff
Bot: #ede9fe / #5b21b6
Font: Poppins

Finance

/* Professional banking assistant */
Primary: #1e3a8a
Background: #ffffff
User: #1e3a8a / #ffffff
Bot: #dbeafe / #1e3a8a
Font: Roboto

Troubleshooting

Logo Not Displaying

Issues:

  • File size too large
  • Wrong format
  • Corrupted file

Solutions:

  1. Compress image (< 2MB)
  2. Convert to PNG or JPG
  3. Try different file

Colors Not Updating

Issue: Changes not reflected in chat

Solution:

  1. Click Save Theme
  2. Refresh chat page
  3. Clear browser cache
  4. Check CSS doesn't override

Custom CSS Not Working

Issue: CSS rules not applied

Debugging:

  1. Check CSS syntax (use validator)
  2. Ensure selectors are correct
  3. Check specificity (use !important if needed)
  4. Verify no conflicting rules

Theme Looks Different on Mobile

Issue: Colors/fonts appear different

Causes:

  • Browser rendering differences
  • Mobile browser color adjustments
  • Dark mode overrides

Solutions:

  • Test on actual devices
  • Use standard web colors
  • Override mobile-specific styles

Best Practices

Design

✅ Do:

  • Use 2-3 main colors maximum
  • Ensure good contrast
  • Test on multiple devices
  • Keep it consistent with your brand
  • Consider accessibility

❌ Don't:

  • Use too many colors
  • Sacrifice readability for style
  • Ignore mobile users
  • Make frequent drastic changes

Performance

✅ Do:

  • Optimize logo file size
  • Use web-safe fonts when possible
  • Keep custom CSS minimal
  • Test load times

❌ Don't:

  • Upload huge images
  • Load many external fonts
  • Add excessive animations
  • Overcomplicate CSS

Branding

✅ Do:

  • Match your website
  • Use brand guidelines
  • Be consistent across chatbots
  • Update when brand changes

Next Steps

Uploading DocumentsIntegrations