Make Open WebUI
look like yours.
Theme Designer Pro is a full theme designer for Open WebUI. Build a palette from one hue, put an animated background behind the chat, and add gradients and custom CSS. Every open page updates when you save.
One hue. Twelve shades.
Open WebUI paints its whole interface from twelve shades of gray. Pick a hue, a chroma and a lightness, and Theme Designer Pro builds all twelve in OKLCH, so every shade keeps the same feel from the darkest to the lightest.
- Lock any color, and sliders, Randomize and image extraction leave it alone.
- Take a palette from an image you upload or paste.
- A separate design for each mode, synced between modes when you want.
Backgrounds that move.
Run an animation behind the whole interface, and the panels turn see-through so it shows. Scripts run in a Web Worker on an OffscreenCanvas, so the chat stays responsive.
- Scripts can follow the mouse and react to clicks and touches.
- Some react to the conversation itself, from its token count.
- Drop a
.jsfile on the designer to import one.
Gradients, still or animated.
Linear, radial and mesh gradients, with color stops you place by hand, an intensity control and an optional slow drift. They sit behind the interface the same way Canvas FX does.
Browse gradientsOne theme for everyone, or one each.
Admins design the instance theme that every user sees. Turn on Allow Personal Themes, and each user also gets a Themes tab in Settings for a theme of their own.
- A personal theme is saved with the account, so it follows the user to every device.
- It shows before Open WebUI draws the page, so nothing flashes first.
- Your valves still apply: Canvas FX or Custom CSS off for the instance is off for everyone.
Describe it. Get it.
Ask a chat for a theme in plain words. The Theme Designer Pro Launcher Tool has the chat model pick the colors and opens the designer in the chat with them applied, ready to fine-tune. In the designer, the AI button does the same.
About the Launcher Tool
Here's a mossy green, soft and a little damp. I've opened it in the designer, ready to fine-tune.
And the rest of the toolbox.
Live on every open page
Save, and every open Open WebUI page updates without a reload. Setups with several workers relay it through Redis.
Draft mode
Try changes in your own browser first. Nobody else sees them until you publish.
Every mode, and System
Separate designs for Dark, OLED, Light and Her, plus a System mode that follows the operating system.
Sign-in page too
Choose which parts of the theme show on the sign-in and sign-up pages.
A real CSS editor
Auto-indent, closing pairs and line numbers, and auto-scoping so a rule only applies to the mode it's for.
Library and history
Save snapshots of a theme, search and export them, and undo or redo any change.
Import from a link
Paste a link to any theme, script or bundle, including a regular GitHub page link.
Theme updates
Themes can carry an update link, and the designer checks it for newer versions.
Admins stay in control
Valves turn Canvas FX, Custom CSS and link imports on or off, and set how see-through the sidebar and menus are.
Start from a preset.
Every preset has a live preview on a mock Open WebUI. Choose Install, confirm it in your designer, and it's yours to change.
Up and running in three steps.
Add the event function
Get it from its community page. Or paste theme_designer_pro_event.py into Admin Panel > Functions > Create New Function.
Turn it on
Switch it on in the Functions list. It needs Open WebUI v0.11.0 or later.
Open the designer
In Settings, choose Themes in the Admin section. Or go to /api/v1/theme-designer for the full-screen designer.
Behind nginx or another reverse proxy? Add proxy_buffering off; to its location block. Without it, other pages see a theme change only after a reload.
Add the Launcher Tool for chats
The optional companion Tool opens the designer inside a chat, and turns a description like "a warm copper theme" into a theme.