From cc2be9f2b28e7af4a8e754935482a3d0c1fa643a Mon Sep 17 00:00:00 2001 From: Marco Beretta <81851188+berry-13@users.noreply.github.com> Date: Thu, 8 Oct 2026 22:41:51 +0200 Subject: [PATCH 1/2] docs: Drop the Canary Availability Notes From the Theme Docs --- content/docs/configuration/dotenv.mdx | 2 +- .../librechat_yaml/object_structure/theme.mdx | 9 ++------- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/content/docs/configuration/dotenv.mdx b/content/docs/configuration/dotenv.mdx index 35c06a71a..063de7456 100644 --- a/content/docs/configuration/dotenv.mdx +++ b/content/docs/configuration/dotenv.mdx @@ -3796,7 +3796,7 @@ Properly setting cache headers is crucial for optimizing the performance and eff **Behaviour:** -- Every color token in the theme engine can be set this way: drop the `rgb-` prefix from the token name and upper-snake-case the rest, so `rgb-surface-submit` becomes `REACT_APP_THEME_SURFACE_SUBMIT` and `rgb-status-error-border` becomes `REACT_APP_THEME_STATUS_ERROR_BORDER`. The token list is the `IThemeRGB` interface in [`packages/client/src/theme/types/index.ts`](https://github.com/LibreChat-AI/LibreChat/blob/canary/packages/client/src/theme/types/index.ts). +- Every color token in the theme engine can be set this way: drop the `rgb-` prefix from the token name and upper-snake-case the rest, so `rgb-surface-submit` becomes `REACT_APP_THEME_SURFACE_SUBMIT` and `rgb-status-error-border` becomes `REACT_APP_THEME_STATUS_ERROR_BORDER`. The token list is the `IThemeRGB` interface in [`packages/client/src/theme/types/index.ts`](https://github.com/LibreChat-AI/LibreChat/blob/dev/packages/client/src/theme/types/index.ts). - Values are inlined into the client when it is built, so the client has to be rebuilt after changing them. Setting them on a prebuilt Docker image has no effect. - The same colors apply in light and dark mode, and they only change colors, not shape. - [`interface.theme`](/docs/configuration/librechat_yaml/object_structure/theme) in `librechat.yaml` outranks these colors, and the high-contrast modes outrank both. `interface.theme` also needs no rebuild and can change shape, so prefer it for new deployments. diff --git a/content/docs/configuration/librechat_yaml/object_structure/theme.mdx b/content/docs/configuration/librechat_yaml/object_structure/theme.mdx index 91a3c2d1a..7e1aa44d6 100644 --- a/content/docs/configuration/librechat_yaml/object_structure/theme.mdx +++ b/content/docs/configuration/librechat_yaml/object_structure/theme.mdx @@ -8,11 +8,6 @@ description: Apply a bundled or custom theme to every user with interface.theme `interface.theme` sets the deployment theme: the colors, shape, typography, shadows and motion that every user sees, in both light and dark mode. It takes either the name of a theme bundled with LibreChat or an inline theme definition. - - `interface.theme` and the appearance scales described on this page are on LibreChat's `canary` - branch and are not part of a tagged release yet. - - ```yaml filename="interface / theme" interface: theme: clickhouse @@ -20,7 +15,7 @@ interface: When `interface.theme` is unset, LibreChat behaves as before: users see the default LibreChat theme, or whatever build-time colors or stored theme apply to them. -This page covers what an operator sets in `librechat.yaml`. The theme engine itself, including the full token list and how each token maps to Tailwind utilities, is documented in the [theme README](https://github.com/LibreChat-AI/LibreChat/blob/canary/packages/client/src/theme/README.md) in the LibreChat repository. +This page covers what an operator sets in `librechat.yaml`. The theme engine itself, including the full token list and how each token maps to Tailwind utilities, is documented in the [theme README](https://github.com/LibreChat-AI/LibreChat/blob/dev/packages/client/src/theme/README.md) in the LibreChat repository. ## How the theme is chosen @@ -143,7 +138,7 @@ The browser applies the same rules to the theme it receives and logs `[Deploymen ### Colors -Colors use the same token names as the theme engine: `rgb-` followed by the token, such as `rgb-surface-primary`, `rgb-text-primary`, `rgb-border-medium`, `rgb-accent-primary` or `rgb-status-error-subtle`. The full list of 130 tokens is `themeColorTokens` in [`packages/data-provider/src/theme.ts`](https://github.com/LibreChat-AI/LibreChat/blob/canary/packages/data-provider/src/theme.ts), which the server and the browser both read, and each token is described in the `IThemeRGB` interface in [`packages/client/src/theme/types/index.ts`](https://github.com/LibreChat-AI/LibreChat/blob/canary/packages/client/src/theme/types/index.ts). +Colors use the same token names as the theme engine: `rgb-` followed by the token, such as `rgb-surface-primary`, `rgb-text-primary`, `rgb-border-medium`, `rgb-accent-primary` or `rgb-status-error-subtle`. The full list of 130 tokens is `themeColorTokens` in [`packages/data-provider/src/theme.ts`](https://github.com/LibreChat-AI/LibreChat/blob/dev/packages/data-provider/src/theme.ts), which the server and the browser both read, and each token is described in the `IThemeRGB` interface in [`packages/client/src/theme/types/index.ts`](https://github.com/LibreChat-AI/LibreChat/blob/dev/packages/client/src/theme/types/index.ts). Beyond the surface, text, border, status and syntax palettes, these roles let a theme restyle specific interaction states and components: From bd2dc722b3858d45cbec40a8aad0162fcc10535a Mon Sep 17 00:00:00 2001 From: Marco Beretta <81851188+berry-13@users.noreply.github.com> Date: Thu, 8 Oct 2026 22:42:53 +0200 Subject: [PATCH 2/2] docs: Mark the Theme Page as Pending Instead of Canary --- .../configuration/librechat_yaml/object_structure/theme.mdx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/content/docs/configuration/librechat_yaml/object_structure/theme.mdx b/content/docs/configuration/librechat_yaml/object_structure/theme.mdx index 7e1aa44d6..87294027d 100644 --- a/content/docs/configuration/librechat_yaml/object_structure/theme.mdx +++ b/content/docs/configuration/librechat_yaml/object_structure/theme.mdx @@ -8,6 +8,11 @@ description: Apply a bundled or custom theme to every user with interface.theme `interface.theme` sets the deployment theme: the colors, shape, typography, shadows and motion that every user sees, in both light and dark mode. It takes either the name of a theme bundled with LibreChat or an inline theme definition. + + `interface.theme` and the appearance scales on this page are merged to LibreChat's `dev` branch + and are not in a tagged release yet; v0.8.8 and earlier do not read them. + + ```yaml filename="interface / theme" interface: theme: clickhouse