Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a69b1f34b3
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| Sets the deployment theme applied to every user, in both light and dark mode. Either the name of a bundled theme (`librechat` or `clickhouse`) or an inline theme definition with its own colors, radii, fonts, shadows and motion. | ||
|
|
||
| It outranks the `REACT_APP_THEME_*` build-time colors and users' stored themes, yields to the high-contrast modes, and is never saved to the user's browser, so removing it restores each user's own theme. |
There was a problem hiding this comment.
When the client was built with any REACT_APP_THEME_* value, removing interface.theme falls back to those build-time colors rather than restoring the user's stored theme. The detailed Theme page correctly includes this condition, so this summary should do the same to avoid giving operators an incorrect rollback expectation.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Fixed in 82923b8. Checked against canary client/src/Providers/DeploymentTheme.tsx: on withdrawal the stored theme is only read when getThemeFromEnv() returns nothing, so a build with REACT_APP_THEME_* falls back to those colors. The interface summary now says so, matching the Theme page.
| 3. **`REACT_APP_THEME_*`** build-time colors. See [Theme Colors](/docs/configuration/dotenv#theme-colors). | ||
| 4. **The user's stored theme** in their browser. | ||
|
|
||
| The deployment theme only decides colors and shape. Each user still chooses light, dark or system mode themselves. |
There was a problem hiding this comment.
For an inline theme that sets fontFamily, shadow values, or motion durations, the deployment theme does control more than colors and shape, as the appearance table later on this page documents. Saying it “only decides colors and shape” contradicts those supported settings and may lead operators to think their typography, shadows, or motion configuration is ignored; only the user's light/dark/system mode remains independently selected.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Fixed in 82923b8. themeAppearanceProperties in canary packages/client/src/theme/registry.ts also covers fontFamily, monoFontFamily, the shadow steps and motionFast/motionNormal. The sentence now reads "sets colors, shape, fonts, shadows and motion, but not the mode"; light/dark/system stays the user's choice.
📦 Next.js Bundle Analysis for librechat.aiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
📦 Next.js Bundle Analysis for librechat.aiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
📦 Next.js Bundle Analysis for librechat.aiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 1af8f36d41
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| The server checks `interface.theme` with the same rules the browser applies before painting it, when `librechat.yaml` is loaded and on every config reload. | ||
|
|
||
| **An invalid theme falls back to the default theme.** A wrong `version`, a missing `name`, a mode other than `light` or `dark`, an unknown field, an unknown brand token, or a value of the wrong kind for any token makes the theme unusable. LibreChat removes `interface.theme`, logs a warning with one line per problem, and loads the rest of the configuration as usual, so a theme mistake never stops the server: |
There was a problem hiding this comment.
When an inline theme is invalid for a user with build-time colors or a stored theme, removing interface.theme makes the client select that lower-priority source, as the precedence and removal behavior above already document; it does not necessarily apply the default LibreChat theme. This claim gives operators the wrong expected result while diagnosing a rejected definition, so describe the same fallback chain used for an unset theme.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Fixed in 0dce7a9. The Validation section now says an invalid theme is dropped as if interface.theme were unset, so users get the next source in the priority chain (REACT_APP_THEME_* colors or their stored theme, else the default), and notes that the server log calls this the default theme. Checked against packages/api/src/app/theme.ts, which deletes interface.theme on error.
| | `librechat` | The default LibreChat palette and shape. Setting it explicitly also overrides `REACT_APP_THEME_*` colors and users' stored themes. | | ||
| | `clickhouse` | A reference theme built from ClickHouse's Click UI design tokens. See [ClickHouse theme](#clickhouse-theme). | | ||
|
|
||
| A name that is not one of these is ignored: the browser console logs `[DeploymentTheme] Ignoring unknown interface.theme "<name>"` and the app falls back to the next source in the list above. |
There was a problem hiding this comment.
When an operator puts an unknown bundled name in librechat.yaml, the server-side validation described later on this page rejects and removes it before the pre-login configuration reaches the browser, so the browser does not ordinarily emit this console message. Point readers to the server warning instead; the browser warning is only relevant to cases such as the cached-client mismatch described later.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Fixed in 0dce7a9. The bundled-themes paragraph now says the server logs an unknown name and drops interface.theme, pointing to Validation, which quotes the server message (Unknown bundled theme "", expected one of: librechat, clickhouse). The browser warning is kept only for the cached-client case at the end of Validation.
…theme Add a Theme page under the librechat.yaml object structure covering bundled theme names, the inline definition format, theme precedence, shared-link tenant themes, every appearance key with its default, brand tokens and the ClickHouse reference theme. Add the theme field to the interface page and document the REACT_APP_THEME_* build-time colors in the environment variables page.
Removing interface.theme falls back to REACT_APP_THEME_* colors when the client was built with them, not to the stored theme, and the deployment theme also sets fonts, shadows and motion.
1af8f36 to
0dce7a9
Compare
📦 Next.js Bundle Analysis for librechat.aiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
This branch was successfully deployed
1 participant
Summary
Documents the deployment theme on LibreChat
canary. A new Theme page under thelibrechat.yamlobject structure covers the bundled names (librechat,clickhouse), the inline definition format, precedence against high contrast,REACT_APP_THEME_*and stored themes, shared-link tenant themes, the 106 color tokens with the focus, pressed, disabled, control border, scrim, switch, table and chart series roles, all 46 appearance properties with their defaults and accepted values (including the type scale, line heights, scrim opacities, switch size, table spacing anddisabledStyle), brand tokens, and what the ClickHouse reference theme changes.It also documents how a theme is validated: the server checks
interface.themewhen the config loads and on reload, and an invalid theme falls back to the default theme with a warning while the rest of the config loads. An unknown color or appearance token is ignored with a warning naming it, and the rest of the theme applies (LibreChat-AI/LibreChat#16529). The fonts section reflects that Inter, Roboto Mono and Inconsolata are bundled, and a closing section explains the published@librechat/client/theme.cssstylesheet and its fonts.The interface page gains a short
themesection that links to it, and the environment variables page documentsREACT_APP_THEME_*, which had no docs before.Change Type
Testing
packages/data-provider/src/theme.ts,packages/client/src/themeandpackages/api/src/appon the LibreChat PR head.pnpm buildon Node 24.16.0 succeeds, and the prerendered Theme page contains the new sections and tables.@mdx-js/mdxandremark-gfm, and Prettier reports it clean. ESLint ignores MDX in this repo.Checklist