Complete CSS Template for Aventora Flutter App

All Customizable Colors

Use this template in the Custom CSS field in aventora-admin settings page to customize all colors in the Flutter app.

/* Custom CSS for Embedded Chatbot */
/* Complete theme with all customizable colors */

/* Main container and body */
body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* All color customization */
:root {
  /* Primary Colors - Used for main actions, icons, links */
  --primary-color: #6761CA;        /* Purple - Main brand color */
  --primary-hover: #5851B1;        /* Darker purple - Hover states */
  
  /* Background & Text */
  --background-color: #FFFFFF;     /* White - App background */
  --text-color: #0B1128;           /* Dark blue - Primary text */
  --border-color: #E5E7EB;         /* Light gray - Borders and dividers */
  
  /* Action Colors - For different button types */
  --error-color: #F44336;          /* Red - Destructive actions (End Conversation, Delete) */
  --success-color: #4CAF50;        /* Green - Success messages, confirmations */
  --warning-color: #FF9800;        /* Orange - Warnings, alerts */
  --info-color: #2196F3;           /* Blue - Information, help */
}

/* Chat container */
.flutter-view {
  background-color: var(--background-color);
}

/* Buttons */
button {
  background-color: var(--primary-color);
  color: white;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: var(--primary-hover);
}

/* Input fields */
input, textarea {
  border-color: var(--border-color);
  border-radius: 6px;
}

input:focus, textarea:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(103, 97, 202, 0.1);
}

/* Text elements */
p, span, div {
  color: var(--text-color);
}

/* Links */
a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Scrollbar customization (optional) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #F3F4F6;
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-hover);
}

Color Usage Guide

Primary Colors

Variable	Default	Usage
--primary-color	#6761CA (Purple)	Login button, Start Chat, Generate Token, Save buttons, Icons, Links
--primary-hover	#5851B1 (Dark Purple)	Hover states for primary buttons

Background & Text

Variable	Default	Usage
--background-color	#FFFFFF (White)	App background
--text-color	#0B1128 (Dark Blue)	All text content
--border-color	#E5E7EB (Light Gray)	Input borders, dividers, card borders

Action Colors

Variable	Default	Usage
--error-color	#F44336 (Red)	End Conversation button, Delete buttons, Error messages
--success-color	#4CAF50 (Green)	Success messages, Approve/Accept buttons
--warning-color	#FF9800 (Orange)	Warning messages, Caution alerts
--info-color	#2196F3 (Blue)	Information messages, Help tooltips

Examples

Example 1: Brand Colors (Current Default)

:root {
  --primary-color: #6761CA;     /* Aventora Purple */
  --primary-hover: #5851B1;
  --error-color: #F44336;       /* Material Red */
  --success-color: #4CAF50;     /* Material Green */
}

Example 2: Corporate Blue Theme

:root {
  --primary-color: #1976D2;     /* Corporate Blue */
  --primary-hover: #1565C0;     /* Darker Blue */
  --error-color: #D32F2F;       /* Dark Red */
  --success-color: #388E3C;     /* Dark Green */
}

Example 3: Modern Green Theme

:root {
  --primary-color: #4CAF50;     /* Green */
  --primary-hover: #388E3C;     /* Dark Green */
  --error-color: #E53935;       /* Red */
  --success-color: #00897B;     /* Teal */
}

Example 4: Dark Theme Colors

:root {
  --primary-color: #BB86FC;     /* Light Purple */
  --primary-hover: #9965F4;     /* Purple */
  --background-color: #121212;  /* Dark Background */
  --text-color: #E1E1E1;        /* Light Text */
  --border-color: #2C2C2C;      /* Dark Border */
  --error-color: #CF6679;       /* Pink Red */
  --success-color: #03DAC6;     /* Cyan */
}

Testing Your Colors

1. Update Custom CSS in aventora-admin settings
2. Save settings
3. Restart Flutter app (or wait 30 minutes for cache to expire)
4. Verify colors:
   • Login button → primary-color
   • Start Chat button → primary-color
   • End Conversation button → error-color (now customizable!)
   • Icons → primary-color
   • Text → text-color

Notes

• All colors support hex format: #RGB or #RRGGBB
• Colors are cached for 30 minutes for performance
• If CSS parsing fails, app falls back to default colors
• The app will never crash from invalid CSS - it just uses defaults
• Font family can be changed but only common Google Fonts are supported

Supported Fonts

• Poppins (default)
• Inter
• Roboto
• Open Sans
• Lato
• Montserrat

Example:

body {
  font-family: 'Inter', sans-serif;
}