From b95bf36944cfba5187682a49d5abe3acc1ce6914 Mon Sep 17 00:00:00 2001 From: Inferencebot Date: Thu, 1 Oct 2026 21:24:33 -0600 Subject: [PATCH] Chat theme v4: drop decorative dots; color scheme only (matches dashboard/panel) --- chat-theme/openwebui-custom.css | 81 ++++----------------------------- 1 file changed, 9 insertions(+), 72 deletions(-) diff --git a/chat-theme/openwebui-custom.css b/chat-theme/openwebui-custom.css index a77eac0..533de18 100644 --- a/chat-theme/openwebui-custom.css +++ b/chat-theme/openwebui-custom.css @@ -1,14 +1,11 @@ -/* Inference Cooperative theme for Open WebUI — v3 +/* Inference Cooperative theme for Open WebUI — v4 House style: cream #faf8f5, ink #2d3327, greens #5b8c5a/#6ba86b/#7ab87a, - bronze #a97a4a, earthy red #b3543a. Figtree served same-origin. + bronze #a97a4a. Figtree served same-origin. No decorative dots (removed at + operator request); color scheme only, matching the dashboard and admin panel. - v3 approach: STOP remapping Tailwind's gray tokens wholesale (v1/v2 broke - text contrast in both modes). Instead: - - Key everything off the app's OWN class strategy (html.dark), not - prefers-color-scheme, so the app's theme toggle stays authoritative. - - Tint only large surfaces (app background, sidebar, message bubbles). - - Leave ALL text tokens alone; add explicit high-contrast rules only where - Open WebUI's own defaults are too faint. */ + Served via the boot watchdog: Open WebUI's startup overwrites custom.css + (empty build copy), so this file lives as /static/coop.css and the watchdog + writes a one-line @import into custom.css. */ /* ---------- Font (same-origin, no CORS needed) ---------- */ @font-face { @@ -44,32 +41,26 @@ html, body { font-family: 'Figtree', -apple-system, 'Segoe UI', system-ui, sans-serif !important; } -/* ---------- Light mode (no .dark class): cream surfaces ---------- */ +/* ---------- Light mode: cream surfaces, readable text ---------- */ html:not(.dark) body { background-color: #faf8f5 !important; } - html:not(.dark) #sidebar { background: linear-gradient(180deg, #f6f3ee 0%, #f1ede5 100%) !important; border-right: 1px solid #e4e0d8 !important; } - -/* Chat text: near-black, explicitly (defense in depth — Open WebUI's own - text tokens are untouched, this only backstops) */ html:not(.dark) .markdown-prose { color: #262b21; } -/* ---------- Dark mode (.dark class): warm greens, bright text ---------- */ +/* ---------- Dark mode: warm greens, bright text ---------- */ html.dark body { background-color: #1f241b !important; } - html.dark #sidebar { background: linear-gradient(180deg, #262b21 0%, #1f241b 100%) !important; border-right: 1px solid #3e4636 !important; } - html.dark .markdown-prose { color: #f0f3ea; } @@ -97,7 +88,7 @@ button.bg-black:hover, .btn-primary:hover { background-color: #6ba86b !important; } -/* User message bubble: soft green tint (matches Open WebUI's gray-100 bubble) */ +/* User message bubble: soft green tint */ html:not(.dark) div.bg-gray-100[class*="rounded"] { background-color: #eaf3ea !important; } @@ -132,57 +123,3 @@ html.dark ::selection { background: #3e5a3d; } /* ---------- Links ---------- */ html:not(.dark) a { color: #3f6e3e; } html.dark a { color: #8fc98f; } - -/* ---------- Background dots (homepage motif echo) ---------- - Open WebUI's app root is an OPAQUE full-viewport wrapper (bg-white/dark:bg-gray-900), - so a background layer (body::before, z-index 0) only shows pre-hydration — the - "flash then disappear" effect. Instead: a fixed overlay of pale dots sits ON TOP of - everything (pointer-events: none) at very low opacity, below modals/menus (z-40+). */ -body::before { - content: ""; - position: fixed; - inset: 0; - z-index: 2; /* above app shell bg & content surfaces, below z-40 overlays */ - pointer-events: none; /* never intercept clicks/hover */ - background-image: - radial-gradient(circle 16px at 7% 58%, #b7d8c2 0 100%, transparent 100%), - radial-gradient(circle 20px at 28% 52%, #bfdccd 0 100%, transparent 100%), - radial-gradient(circle 24px at 55% 30%, #bfdccd 0 100%, transparent 100%), - radial-gradient(circle 18px at 68% 42%, #b7d8c2 0 100%, transparent 100%), - radial-gradient(circle 22px at 86% 38%, #b7d8c2 0 100%, transparent 100%), - radial-gradient(circle 17px at 81% 72%, #bfdccd 0 100%, transparent 100%), - radial-gradient(circle 16px at 9% 88%, #b7d8c2 0 100%, transparent 100%), - radial-gradient(circle 18px at 70% 80%, #bfdccd 0 100%, transparent 100%), - radial-gradient(circle 18px at 66% 30%, #d9c3a8 0 100%, transparent 100%), - radial-gradient(circle 5px at 4% 12%, #a8cdb4 0 100%, transparent 100%), - radial-gradient(circle 4px at 12% 34%, #b5d4c0 0 100%, transparent 100%), - radial-gradient(circle 5px at 16% 78%, #a8cdb4 0 100%, transparent 100%), - radial-gradient(circle 9px at 24% 6%, #b7d8c2 0 100%, transparent 100%), - radial-gradient(circle 4px at 31% 22%, #b5d4c0 0 100%, transparent 100%), - radial-gradient(circle 5px at 38% 70%, #a8cdb4 0 100%, transparent 100%), - radial-gradient(circle 6px at 47% 10%, #b7d8c2 0 100%, transparent 100%), - radial-gradient(circle 4px at 52% 55%, #a8cdb4 0 100%, transparent 100%), - radial-gradient(circle 5px at 63% 14%, #b5d4c0 0 100%, transparent 100%), - radial-gradient(circle 6px at 61% 66%, #bfdccd 0 100%, transparent 100%), - radial-gradient(circle 4px at 72% 58%, #b5d4c0 0 100%, transparent 100%), - radial-gradient(circle 8px at 78% 8%, #a8cdb4 0 100%, transparent 100%), - radial-gradient(circle 4px at 83% 26%, #b5d4c0 0 100%, transparent 100%), - radial-gradient(circle 6px at 76% 48%, #bfdccd 0 100%, transparent 100%), - radial-gradient(circle 5px at 93% 16%, #a8cdb4 0 100%, transparent 100%), - radial-gradient(circle 4px at 90% 60%, #b5d4c0 0 100%, transparent 100%), - radial-gradient(circle 4px at 95% 46%, #b5d4c0 0 100%, transparent 100%), - radial-gradient(circle 5px at 89% 86%, #a8cdb4 0 100%, transparent 100%), - radial-gradient(circle 4px at 40% 88%, #b5d4c0 0 100%, transparent 100%), - radial-gradient(circle 5px at 57% 84%, #a8cdb4 0 100%, transparent 100%), - radial-gradient(circle 5px at 20% 44%, #d9c3a8 0 100%, transparent 100%), - radial-gradient(circle 4px at 44% 38%, #e0cbb2 0 100%, transparent 100%), - radial-gradient(circle 5px at 87% 70%, #e0cbb2 0 100%, transparent 100%), - radial-gradient(circle 4px at 33% 76%, #d9c3a8 0 100%, transparent 100%), - radial-gradient(circle 5px at 58% 72%, #e0cbb2 0 100%, transparent 100%), - radial-gradient(circle 6px at 97% 78%, #d9c3a8 0 100%, transparent 100%), - radial-gradient(circle 4px at 3% 72%, #e0cbb2 0 100%, transparent 100%); - opacity: 0.35; -} -html.dark body::before { opacity: 0.18; } -/* Keep code blocks readable above the dots */ -pre, code, .codeblock { position: relative; z-index: 3; background-color: inherit; }