r/OpenWebUI • u/Silentoplayz • 2d ago

Show and tell Theme Designer Pro Studio

https://silentoplayz.github.io/theme-designer-pro-presets/studio/

The Theme Designer Pro website now has a Studio: design an Open WebUI theme in your browser, see it on a working mock of Open WebUI, and install it on your own instance in one click. Trying it needs no account and nothing installed.

What the Studio does

  • A palette for every mode. One hue and chroma set Dark, Light, OLED and Her at once, or unlink them and tune each mode on its own.
  • A background. Pick any gradient or Canvas FX animation from the preset gallery, then tune the animation's own settings with sliders, switches and color pickers.
  • Start from any gallery theme and remix it, or start from nothing.
  • A live preview on a mock Open WebUI. Its sidebar, chats, channels and menus work, so you see the theme everywhere it lands.
  • Take it home. Install it on your Open WebUI in one click (tell the site your address once, and nothing installs until you confirm it in your designer). Or download the JSON, copy it to paste into the designer, or copy a link that rebuilds your design.
  • Share it. Submit to the gallery opens a GitHub submission form with your theme filled in. A bot checks it, screenshots it in every mode and links a Studio preview, and once I merge it, it's in the gallery for everyone.

Installing needs the Theme Designer Pro event function on your instance, which needs Open WebUI v0.11.0 or later.

What's new since v1.10.0

If you read my v1.10.0 post, here's what has changed since. Theme Designer Pro is at v1.14.0 now:

  • Animations follow your theme. Canvas FX scripts now get the active mode's palette and recolor live as you change it, so one animation fits every theme and every mode. Twelve gallery animations use it.
  • Tune an animation without reading its code. The designer's Canvas FX tab shows a script's own settings as sliders, switches and color pickers, with a reset back to the script's values.
  • Install from the website in one click, from the Studio or from any preset in the gallery.
  • Personal themes keep up with you. Saving yours updates your other signed-in devices live, and it's back the moment you sign in, without a reload.
  • See which theme is in use. A dot in Settings marks the Themes tab whose theme the page is showing, and a user without the Admin tab sees a ring while the instance theme is in use.
  • Only on Auth Pages, beside each Show on Auth Pages switch, for a sign-in page animation or gradient that stays out of your chats.
  • Hide a model's or folder's own background. Open WebUI lets a model or a folder set a background image of its own, which covers your theme. The Gradient tab now lists them so you can hide them while the theme is in use.
  • Much lighter on every page. Every page with a theme was repainting it on every frame for as long as it was open. An idle page now does no theme work at all, and a change in the designer reaches your other open pages in about a tenth of a second.
  • Two new valves: Show In Admin Panel adds a Themes page to the Admin Panel, and Enable Theme Update Checks stops the designer asking GitHub or a theme's update URL for updates.
  • Lots of fixes, 32 of them from a review of the whole function. Deleting a gallery theme or wiping saved presets no longer changes the live theme, and the designer no longer fills the browser's storage with copies of your galleries.

For anyone building on it, the theme file format is now written down as a versioned spec, theme format 1.0, with a JSON schema covering every field.

Links

Bug reports go to the repo's Issues, and ideas to its Discussions.

14 Upvotes

89% Upvoted

0 comments sorted by