A beginner-friendly guide to how PraisonAIUI creates its visual appearance — what controls the colors, fonts, and layout you see on screen.
PraisonAIUI's appearance comes from three layers working together:
In plain English:
1. You choose a theme preset (like "zinc" or "blue") in your config
2. The system translates that into CSS variables (color codes)
3. Every button, text, and background reads those variables to know what color to be
---
The preset sets your color palette — it changes the accent color used for buttons, active states, and highlights across the entire UI.
| Category | Options |
|----------|---------|
| Neutral | zinc (default), slate, stone, gray, neutral |
| Warm | red, orange, amber, yellow |
| Cool | blue, indigo, violet, purple, cyan, sky, teal |
| Nature | green, emerald, lime |
| Vibrant | pink, rose, fuchsia |
When light mode is on, all backgrounds flip to white/light gray and text becomes dark.
| Value | Effect |
|-------|--------|
| none | Sharp, square corners |
none
| sm | Slightly rounded |
sm
| md | Medium rounded (default) |
md
| lg | More rounded |
lg
| xl | Very rounded, pill-shaped buttons |
xl
For fine-grained control, override these variables in customCss:
customCss
| Variable | Default (dark) | What It Controls |
|----------|---------------|-----------------|
| --db-bg | #0a0a0f | Page background |
--db-bg
#0a0a0f
| --db-sidebar-bg | #111118 | Sidebar background |
--db-sidebar-bg
#111118
| --db-accent | #6366f1 | Buttons, active items, highlights |
--db-accent
#6366f1
| --db-text | #e4e4e7 | Primary text |
--db-text
#e4e4e7
| --db-text-dim | #71717a | Secondary/muted text |
--db-text-dim
#71717a
| --db-border | rgba(255,255,255,0.06) | Borders and dividers |
--db-border
rgba(255,255,255,0.06)
| --db-card-bg | rgba(255,255,255,0.03) | Card backgrounds |
--db-card-bg
rgba(255,255,255,0.03)
| --db-radius | 10px | Corner roundness |
--db-radius
10px
When the same setting is defined in multiple places:
| Priority | Source | Example |
|----------|--------|---------|
| 1 (highest) | CLI flag | --style chat |
--style chat
| 2 | Python API | aiui.set_theme(preset="blue") |
aiui.set_theme(preset="blue")
| 3 | YAML config | site.theme.preset: blue |
site.theme.preset: blue
| 4 (lowest) | Built-in defaults | zinc, dark, md radius |
PraisonAIUI includes two different chat interfaces. Understanding the difference helps you choose the right one and know what features to expect.
When it's active: style: chat, style: agents, or style: playground
style: chat
style: agents
style: playground
This is the recommended chat for most users. It's built with React and benefits from the full modern web stack.
What you get:
| Feature | How it works |
|---------|-------------|
| 🎨 Your theme colors | Automatically follows your preset and darkMode settings |
preset
darkMode
| 📋 Copy code button | Click to copy any code block — shows "✓ Copied" feedback |
| 🌈 Syntax highlighting | Code is color-coded by language (Python, JavaScript, etc.) |
| 📊 Markdown tables | Tables render as proper formatted tables |
| 🔤 Rich typography | Headers, bold, italic, lists — all beautifully styled |
| 📎 File attachments | Upload files to include as context |
When it's active: style: dashboard
style: dashboard
This is a lighter chat built as a dashboard plugin. It's designed for quick admin interactions within the dashboard.
| 🎨 Dashboard theme | Uses the dashboard's color scheme (now follows your preset!) |
| 💬 Basic markdown | Bold, italic, headings, code blocks, links, lists |
| 🔧 Tool call display | Shows when the AI is using tools |
| 📋 Session management | Create, switch, and manage conversations |
| 🤖 Agent selection | Pick which AI agent to chat with |
What it doesn't have (yet):
| If you want... | Use this style |
|----------------|---------------|
| Best chat experience with all features | style: chat |
| Multi-agent dashboard with admin controls | style: dashboard |
| Agent profiles and switching | style: agents |
| Side-by-side prompt testing | style: playground |
Where does each piece of styling live?
| File | What It Does |
|------|-------------|
| src/frontend/src/index.css | Main CSS — imports Tailwind, defines default color variables |
src/frontend/src/index.css
| src/frontend/src/themes.ts | Theme engine — translates preset names to CSS variable values |
src/frontend/src/themes.ts
| src/frontend/src/chat/ChatMessages.tsx | React chat — has copy buttons, syntax highlighting |
src/frontend/src/chat/ChatMessages.tsx
| templates/frontend/plugins/views/chat.js | Dashboard chat — basic markdown, dashboard theme |
templates/frontend/plugins/views/chat.js
| templates/frontend/plugins/dashboard.js | Dashboard — defines --db-* color variables + reads config |
templates/frontend/plugins/dashboard.js
--db-*