/* Bodhi. * * Ink #191C18, Ivory #F5F2E9, Signal #FF653E. * * Signal appears in exactly one place: the send button. * * It was on the focus ring and the caret too, and that was wrong - it drew an * orange line round whatever you touched and a thin orange bar in the input, * which reads as an error rather than an accent. The kit uses the square as a * single small signal, not as a highlighter. * * These override LibreChat's own custom properties rather than fighting its * components, so an upgrade that restyles a button still inherits the palette. * * html:root and !important are both needed. Vite injects LibreChat's stylesheet * from JavaScript, so it lands in the document AFTER this file however early the * link sits in - and a later rule of equal specificity wins. Raising the * selector and marking the declarations is what actually makes these apply. */ :root { --bodhi-ink: #191c18; --bodhi-ink-soft: #2a2e28; --bodhi-ivory: #f5f2e9; --bodhi-ivory-dim: #e8e3d5; --bodhi-signal: #ff653e; --bodhi-signal-dim: #e5542f; } /* ---- light: ink on ivory ------------------------------------------------ */ html:root, html[data-theme="light"]:root { --surface-primary: var(--bodhi-ivory) !important; --surface-secondary: #efebdf !important; --surface-tertiary: #e8e3d5 !important; --surface-hover: #e3ded0 !important; --surface-submit: var(--bodhi-signal) !important; --surface-submit-hover: var(--bodhi-signal-dim) !important; --text-primary: var(--bodhi-ink) !important; --text-secondary: #4a4f47 !important; --text-tertiary: #6b7067 !important; --border-light: #ddd7c7 !important; --border-medium: #cfc8b5 !important; --border-heavy: #b8b09c !important; /* Focus stays neutral. Mapping these to Signal drew the orange line round every focused element - the thing I removed my own outline rule for, put straight back through LibreChat's token. */ --ring-primary: var(--bodhi-ink-soft) !important; --brand-purple: var(--bodhi-ink) !important; --presentation: var(--bodhi-ivory) !important; } /* ---- dark: the brand's resting state ------------------------------------ */ html[data-theme="dark"]:root, html.dark:root { --surface-primary: var(--bodhi-ink) !important; --surface-secondary: var(--bodhi-ink-soft) !important; --surface-tertiary: #343830 !important; --surface-hover: #3b3f37 !important; --surface-submit: var(--bodhi-signal) !important; --surface-submit-hover: var(--bodhi-signal-dim) !important; --text-primary: var(--bodhi-ivory) !important; --text-secondary: #c8c4b6 !important; --text-tertiary: #9a968a !important; --border-light: #343830 !important; --border-medium: #434840 !important; --border-heavy: #5a6055 !important; --ring-primary: var(--bodhi-ivory-dim) !important; --brand-purple: var(--bodhi-ivory) !important; --presentation: var(--bodhi-ink) !important; } /* The caret. Small, and the one place the eye rests before typing. */ /* The caret was a thin orange line in the input. It inherits the text colour now, like any other cursor. */ /* No focus override. * * A blanket 2px Signal outline drew a hard orange line around every element you * touched - the input, buttons, links - and it looked like an error state * rather than an accent. LibreChat already styles focus accessibly, and * --ring-primary above is mapped to Signal, so focus picks up the brand * through LibreChat's own treatment instead of a rule shouting over it. * * Signal stays on the send control and the caret: the things that mean "act". */ /* The send control. The only large area of Signal in the interface. */ button[data-testid="send-button"]:not(:disabled), button[aria-label*="Send" i]:not(:disabled) { background-color: var(--bodhi-signal); color: var(--bodhi-ivory); } button[data-testid="send-button"]:not(:disabled):hover, button[aria-label*="Send" i]:not(:disabled):hover { background-color: var(--bodhi-signal-dim); } /* The mark sits in a square slot at several sizes. Keep it from being cropped and give it the clear space the kit asks for. */ img[src*="logo.svg"] { object-fit: contain; padding: 2px; } /* ---- the surfaces that bypass the tokens -------------------------------- * * LibreChat's sign-in page does not use its own design tokens: it paints with * Tailwind utilities directly (bg-white, dark:bg-gray-900, text-black). The * token overrides above are correct and do apply - --surface-primary really is * #191C18 - but nothing on this page reads them. * * Inspected the live DOM rather than guessing, and the set is small and * knowable: bg-white, dark:bg-gray-900, text-black, dark:text-white, * text-green-500. Mapping those is a bounded job. If this list starts growing * with every LibreChat release, that is the signal to stop patching and have * the fork conversation properly - it is in the plan's risks for that reason. */ body { background-color: var(--bodhi-ivory) !important; } .dark body, html.dark body { background-color: var(--bodhi-ink) !important; } .bg-white { background-color: var(--bodhi-ivory) !important; } html.dark .dark\:bg-gray-900, .dark .dark\:bg-gray-900 { background-color: var(--bodhi-ink) !important; } .text-black { color: var(--bodhi-ink) !important; } html.dark .dark\:text-white, .dark .dark\:text-white { color: var(--bodhi-ivory) !important; } /* LibreChat's link green is not in this palette. Signal is, and a link is an action - which is where Signal belongs. */ .text-green-500 { color: inherit !important; text-decoration: underline; } /* The sign-in button keeps LibreChat's own border. An orange outline on it read as a warning, not an invitation. */ /* ---- the neutral scale, mapped once ------------------------------------- * * Spot-fixing the classes one screen used was wrong: the next screen has its * own, and the header came back white. LibreChat paints with Tailwind's * neutral scale throughout, so the scale itself is mapped to the palette. * * Backgrounds and borders only. Text keeps LibreChat's own contrast decisions * except where it would land Ink on Ink. */ /* Light: the page is Ivory, panels lift towards white, never to pure white. */ .bg-white { background-color: var(--bodhi-ivory) !important; } .bg-gray-50 { background-color: #f8f6ef !important; } .bg-gray-100 { background-color: #efebdf !important; } .bg-gray-200 { background-color: #e8e3d5 !important; } .bg-gray-300 { background-color: #ddd7c7 !important; } /* Dark: the page is Ink, panels lift towards it, never to pure black. */ html.dark .dark\:bg-gray-950, html.dark .dark\:bg-black { background-color: #0f120f !important; } html.dark .dark\:bg-gray-900 { background-color: var(--bodhi-ink) !important; } html.dark .dark\:bg-gray-850, html.dark .dark\:bg-gray-800 { background-color: var(--bodhi-ink-soft) !important; } html.dark .dark\:bg-gray-700 { background-color: #343830 !important; } html.dark .dark\:bg-gray-600 { background-color: #434840 !important; } /* The bars that frame the conversation. These are what looked white. */ header, nav[class*="bg-"], aside[class*="bg-"], [class*="sticky"][class*="bg-white"] { background-color: var(--bodhi-ivory) !important; } html.dark header, html.dark nav[class*="bg-"], html.dark aside[class*="bg-"], html.dark [class*="sticky"][class*="bg-white"] { background-color: var(--bodhi-ink) !important; } /* Borders follow the ground rather than staying Tailwind grey. */ .border-gray-100, .border-gray-200, .border-gray-300 { border-color: #ddd7c7 !important; } html.dark .dark\:border-gray-600, html.dark .dark\:border-gray-700, html.dark .dark\:border-gray-800 { border-color: #343830 !important; } /* Ink on Ink is the one text case that must be corrected. */ html.dark .text-gray-900, html.dark .text-black { color: var(--bodhi-ivory) !important; } /* ---- the white square behind every icon --------------------------------- * * LibreChat renders endpoint icons as * * and falls back to its own inline mark, with the same bg-white, when no icon * resolves. That white tile is what sat behind the Bodhi mark - and was the * whole of it when the icon did not load. * * The mark carries its own ground, so it needs none underneath. */ img[alt$="logo" i].bg-white, img[src*="logo.svg"].bg-white { background-color: transparent !important; } html.dark img[alt$="logo" i], html.dark img[src*="logo.svg"] { background-color: transparent !important; }