Theme System | PraisonAIUI Docs

Theme SystemSwitch between dark, light, and custom themes using CSS custom properties — applied across all dashboard pages including chat.!Theme ComparisonQuick StartBuilt-in ThemesDark (Default)| Variable | Value | Usage ||----------|-------|-------|| --chat-bg | #0d1117 | Background || --chat-text | #e6edf3 | Primary text || --chat-user-bg | #1f6feb | User message bubble || --chat-assistant-bg | #161b22 | Assistant message bubble || --chat-input-bg | #0d1117 | Input area || --chat-border | #30363d | Borders || --chat-accent | #58a6ff | Links and accents || --chat-code-bg | #161b22 | Code blocks |Light| Variable | Value | Usage ||----------|-------|-------|| --chat-bg | #ffffff | Background || --chat-text | #1f2328 | Primary text || --chat-user-bg | #ddf4ff | User message bubble || --chat-assistant-bg | #f6f8fa | Assistant message bubble || --chat-input-bg | #ffffff | Input area || --chat-border | #d1d9e0 | Borders || --chat-accent | #0969da | Links and accents || --chat-code-bg | #f6f8fa | Code blocks |Custom ThemesRegister a custom theme from Python:Or via API:REST API| Endpoint | Method | Description ||----------|--------|-------------|| /api/theme | GET | Get current theme and CSS variables || /api/theme | PUT | Set the active theme || /api/theme/list | GET | List all available themes || /api/theme/custom | POST | Register a custom theme |How CSS Variables WorkThe theme system injects CSS custom properties into the :root element. All chat and dashboard CSS uses var(--chat-*) references, so switching themes instantly updates the entire UI.RelatedCSS Architecture — Deep dive into CSS layers, variables, and cascade orderGateway Chat — Chat interface (themed)Theming — General theming conceptsDark Mode — Dark mode togglePython API — set_theme(), set_custom_css(), register_theme()