mirror of
https://github.com/MervinPraison/PraisonAIUI.git
synced 2026-11-10 17:29:50 -10:00
MervinPraison
3a10f48632
Closes 5 documented gaps from how-to-add-a-feature.md: - aiui.set_custom_js(path) — inject client JS from Python (new /custom.js route, <script> after plugin-loader). Tests: 10/10 - name= kwarg on all 8 form inputs — stable submit-keys for form_action, avoids label collisions. Tests: 18/18 - Component schema registry — aiui.register_component_schema() + GET /api/components/schemas. Built-in schemas auto-derived from ui.py. Tests: 9/9 - /api/features parallelized via asyncio.gather (warm calls now instant) - mkdocs build fixed for pygments 2.20 via docs_hooks.py Other: - form inputs now emit name + data-label attrs so form_action submit handler collects values correctly (bug fix) - radio submit handler only stores the checked radio's value - switch now has hidden checkbox mirror so form_action sees its state - mkdocs --strict passes - Example 28 uses the new APIs (no more DevTools console workaround) - Bump aiui 0.3.107 -> 0.3.108; sync __version__.py Tests: 542/545 pass (3 pre-existing test-isolation failures unrelated).
3.1 KiB
3.1 KiB
Theme System
Switch between dark, light, and custom themes using CSS custom properties — applied across all dashboard pages including chat.
Quick Start
# Get current theme
curl http://localhost:8083/api/theme
# Switch to light mode
curl -X PUT http://localhost:8083/api/theme \
-H "Content-Type: application/json" \
-d '{"theme": "light"}'
Built-in Themes
Dark (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 Themes
Register a custom theme from Python:
from praisonaiui.features.theme import ThemeManager
mgr = ThemeManager()
mgr.register_theme("ocean", {
"--chat-bg": "#001122",
"--chat-text": "#e0f0ff",
"--chat-user-bg": "#004488",
"--chat-assistant-bg": "#002244",
"--chat-input-bg": "#001122",
"--chat-border": "#003366",
"--chat-accent": "#66bbff",
"--chat-code-bg": "#002244",
})
Or via API:
curl -X POST http://localhost:8083/api/theme/custom \
-H "Content-Type: application/json" \
-d '{
"name": "ocean",
"variables": {
"--chat-bg": "#001122",
"--chat-text": "#e0f0ff"
}
}'
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 Work
graph LR
A["ThemeManager"] --> B["CSS Variables"]
B --> C[":root { --chat-bg: #0d1117 }"]
C --> D["chat.css uses var(--chat-bg)"]
D --> E["All components themed"]
The 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.
Related
- CSS Architecture — Deep dive into CSS layers, variables, and cascade order
- Gateway Chat — Chat interface (themed)
- Theming — General theming concepts
- Dark Mode — Dark mode toggle
- Python API —
set_theme(),set_custom_css(),register_theme()