Guides
Customising Open WebUI Interface: Themes, Branding, and User Experience
Personalise Open WebUI with custom colour schemes, logos, CSS overrides, and interface settings for a branded team experience.
Customising Open WebUI Interface: Themes, Branding, and User Experience
Open WebUI's default interface is clean and functional, but a few customisations make it feel like your own. This guide covers everything from simple theme selection to advanced CSS overrides.
Built-In Themes
| Theme | Best for |
|-------|----------|
| Light | Bright environments, accessibility |
| Dark | Most homelab setups |
| System | Follows OS preference |
| High contrast | Accessibility |
Change via profile icon -> Settings -> Theme.
For improving interaction speed, see Improve Chat UX in Open WebUI for Faster Daily Use.
Adding Branding
Custom logo
```bash
docker run -d \
-p 3000:8080 \
-v /path/to/logo.png:/app/backend/static/logo.png \
-v open-webui-data:/app/backend/data \
ghcr.io/open-webui/open-webui:main
```
Logo specs: 200x60 PNG with transparency.
Custom site name
```bash
-e WEBUI_NAME="Team AI Chat"
-e WEBUI_DESCRIPTION="Private AI for the engineering team"
```
CSS Customisation
```bash
-e WEBUI_CUSTOM_CSS="
:root {
--primary-color: #8b5cf6;
--primary-hover: #7c3aed;
}
"
```
Key CSS variables:
| Variable | Controls |
|----------|----------|
| --primary-color | Main accent colour |
| --bg-color | Main background |
| --text-color | Primary text |
| --chat-bg-user | User message bubble |
Layout Configuration
```bash
-e WEBUI_DEFAULT_MODEL=llama3.2:7b
-e WEBUI_SHOW_MODEL_SELECTOR=false # Single model setup
-e WEBUI_SIDEBAR_DEFAULT_HIDDEN=true # Start collapsed
```
Advanced Customisation
Custom JavaScript for auto-focusing input:
```bash
-e WEBUI_CUSTOM_JS="
document.addEventListener('DOMContentLoaded', function() {
setTimeout(() => {
const input = document.querySelector('.chat-input textarea');
if (input) input.focus();
}, 500);
});
"
```
Saving as Docker Compose
Export your configuration for easy redeployment:
```yaml
services:
open-webui:
image: ghcr.io/open-webui/open-webui:main
ports:
- "3000:8080"
volumes:
- open-webui-data:/app/backend/data
- ./branding/logo.png:/app/backend/static/logo.png
environment:
- WEBUI_NAME=Team AI
- WEBUI_DEFAULT_MODEL=llama3.2:7b
```
Conclusion
Start with built-in themes and your logo, then layer CSS overrides as you learn what matters. The best customisation makes the interface invisible.
FAQ
Will customisations persist across updates?
Theme settings survive updates. CSS overrides may need re-application after major version upgrades.
Can users have different themes?
Not currently. Themes are global for the entire instance.
Is there a light mode?
Yes. Built-in light theme is accessible from user settings.
**Sources:**
