/* Inference Cooperative theme for Open WebUI — v3 House style: cream #faf8f5, ink #2d3327, greens #5b8c5a/#6ba86b/#7ab87a, bronze #a97a4a, earthy red #b3543a. Figtree served same-origin. 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. */ /* ---------- Font (same-origin, no CORS needed) ---------- */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/figtree-400.woff2') format('woff2'); } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/figtree-500.woff2') format('woff2'); } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/figtree-600.woff2') format('woff2'); } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/figtree-700.woff2') format('woff2'); } html, body { font-family: 'Figtree', -apple-system, 'Segoe UI', system-ui, sans-serif !important; } /* ---------- Light mode (no .dark class): cream surfaces ---------- */ 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 ---------- */ 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; } /* ---------- Accent: co-op green (emerald token family) ---------- */ :root { --color-emerald-300: #7ab87a; --color-emerald-400: #6ba86b; --color-emerald-500: #5b8c5a; --color-emerald-600: #4e7a4d; } /* Primary buttons (submit arrow, CTAs) */ button.bg-black, .btn-primary { background-color: #5b8c5a !important; color: #fff !important; } button.bg-black:hover, .btn-primary:hover { background-color: #4e7a4d !important; } /* Toggles / selected states */ .peer:checked ~ .bg-emerald-500, .bg-emerald-500 { background-color: #6ba86b !important; } /* User message bubble: soft green tint (matches Open WebUI's gray-100 bubble) */ html:not(.dark) div.bg-gray-100[class*="rounded"] { background-color: #eaf3ea !important; } html.dark div.bg-gray-100[class*="rounded"] { background-color: #333a2d !important; } /* ---------- Code blocks ---------- */ .codeblock { border-radius: 12px !important; border: 1px solid #e4e0d8; } html.dark .codeblock { border-color: #3e4636; } pre, code { font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace !important; } /* ---------- Scrollbars ---------- */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #c9d3c5; border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: #6ba86b; } html.dark ::-webkit-scrollbar-thumb { background: #3e4636; } html.dark ::-webkit-scrollbar-thumb:hover { background: #6ba86b; } ::-webkit-scrollbar-track { background: transparent; } /* ---------- Selection ---------- */ ::selection { background: #cfe4cf; } html.dark ::selection { background: #3e5a3d; } /* ---------- Links ---------- */ html:not(.dark) a { color: #3f6e3e; } html.dark a { color: #8fc98f; }