Open WebUI chat theme
The member chat (chat.inference.coop) is styled to the co-op's house palette
using Open WebUI's native /static/custom.css hook — no image patching, no
license issues (the branding surface is untouched; we only load styles).
Files
openwebui-custom.css— the theme (copied to the chat app as/app/data/coop-theme.css, served as/static/custom.css)figtree-*.woff2— the four Figtree weights (OFL), copied into the chat app's static dir and served same-origin from/static/fonts/(avoids cross-origin font CORS problems)
How it's deployed
State on the chat app (50ae6c97-… on Cloudron):
- Persistent copies live in
/app/data/(survives app updates):/app/data/coop-theme.css/app/data/fonts/figtree-*.woff2
- Startup hook in
/app/data/env.sh(appended, labeled "Co-op theme"):This is needed because Open WebUI's start script recreatesif [ -f /app/data/coop-theme.css ]; then cp /app/data/coop-theme.css /run/openwebui/static/custom.css 2>/dev/null || true mkdir -p /run/openwebui/static/fonts cp /app/data/fonts/*.woff2 /run/openwebui/static/fonts/ 2>/dev/null || true fi/run/openwebui/static/from pristine image files on every boot. - Live serving — Open WebUI's built
index.htmlalready contains<link rel="stylesheet" href="/static/custom.css">, so no HTML changes.
To update the theme
# 1. Push the new CSS to the app's persistent storage
cloudron push --app 50ae6c97-e851-4d17-b013-51ca7a4e5be0 \
openwebui-custom.css /app/data/coop-theme.css
# 2. Apply immediately (no restart needed)
cloudron exec --app 50ae6c97-e851-4d17-b013-51ca7a4e5be0 -- \
cp /app/data/coop-theme.css /run/openwebui/static/custom.css
Verify at https://chat.inference.coop/static/custom.css.
Contrast notes (v2, 2026-09-29)
v1 remapped the full Tailwind gray scale, which drifted body text and placeholders toward olive and hurt readability. v2 rules:
- Tint surfaces, not text. Backgrounds/borders (gray-50..300) get the cream/olive treatment; text-side tokens (gray-600+) stay near Tailwind defaults in light mode.
- Explicit text contrast fixes for message bodies (
.markdown-prose), placeholders, and secondary text, both modes. - Links darkened to
#3f6e3eon cream (AA); lightened in dark mode.