Conversation
…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.
|
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! 🙌 |
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.
📦 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 that shipped on LibreChat
canary(LibreChat-AI/LibreChat#16286, #16333, #16340, #16341, #16262, #16342). A new Theme page under thelibrechat.yamlobject structure covers bundled names (librechat,clickhouse), the inline definition format, precedence against high contrast,REACT_APP_THEME_*and stored themes, the non-persisted behavior, shared-link tenant themes, every appearance key with its default fromregistry.ts, brand tokens, and what the ClickHouse reference theme changes. It also notes that Inconsolata is not bundled: the app only ships@font-facerules for Inter and Roboto Mono.The interface page gains a short
themesection that links to it, and the environment variables page documentsREACT_APP_THEME_*, which had no docs before. The token list is linked from the app's theme README andIThemeRGB, not copied.Change Type
Testing
themeDefinitionSchemashape and the client'svalidateThemeDefinition/resolveTheme(extracted fromorigin/canary): all pass.pnpm build(Node 24.16.0, frozen lockfile from the public registry): succeeds.next starton the build: Theme, Interface and Environment Variables pages return 200 and render the new sections, tables and anchors (#theme-colors,#configuration-validation,#clickhouse-theme).Checklist