# Theme (https://www.librechat.ai/docs/configuration/librechat_yaml/object_structure/theme)

## Overview

`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.

<Callout type="info" title="Availability">
  `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.
</Callout>

```yaml filename="interface / theme"
interface:
  theme: clickhouse
```

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.

## How the theme is chosen

The client picks one theme, highest priority first:

1. **High-contrast modes.** A user who picks `high-contrast-light` or `high-contrast-dark`, or whose system setting resolves to high contrast, always gets the built-in accessible palette.
2. **`interface.theme`** from `librechat.yaml`.
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 sets colors, shape, fonts, shadows and motion, but not the mode: each user still chooses light, dark or system themselves.

The deployment theme is never written to the user's browser storage. If you remove `interface.theme`, users get their own stored theme back (or the `REACT_APP_THEME_*` colors, when the build sets them).

The theme is part of the pre-login configuration, so the login and registration pages already render with it.

### Shared links

A shared link paints the theme of the tenant that owns the link, not the theme of the person viewing it. If the owning tenant sets no `interface.theme`, or its shared-link configuration fails to load, the shared page shows no deployment theme rather than falling back to the viewer's. Leaving the shared page restores the viewer's theme.

## Bundled themes

| Name | Theme |
| --- | --- |
| `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 server logs it and drops `interface.theme` (see [Validation](#validation)), and the app falls back to the next source in the list above.

### ClickHouse theme

`interface.theme: clickhouse` changes both color and shape:

- **Palette.** Every color token is defined in both modes from Click UI's light and dark tokens, so nothing falls back to the LibreChat palette. A few values are moved along their Click UI ramps where the verbatim value missed WCAG AA contrast.
- **Accent.** Near-black `#151515` in light mode and the ClickHouse yellow `#faff69` in dark mode, used for the accent and submit button. The focus ring is Click UI's outline color: blue `#437eef` in light mode, `#faff69` in dark.
- **Buttons.** The primary button is `#302e32` in light mode and `#faff69` in dark, with Click UI's hover steps.
- **Radii.** A tighter scale taken from Click UI's `border.radii`: controls, menus, tooltips, tabs and `sm` through `lg` at `0.25rem`, surfaces and `xl`/`2xl` at `0.5rem`, large surfaces and `3xl` at `0.75rem`.
- **Shadows.** Click UI's single elevation shadow on every raised surface, menus and dragged items, at 0.15 opacity in light mode and 0.6 in dark, with a hairline shadow for the `2xs` through `sm` steps. Tooltips have no shadow.
- **Controls.** Buttons and fields are 2rem tall, controls are padded `1rem` with a `0.5rem` icon gap and a regular (`400`) label weight. Fields are filled (`fieldFillStyle: fill`) and swap their edge color on focus (`fieldFocusStyle: border`); labels are `0.75rem` at weight `500`. Disabled controls use the `fill` style with their own disabled colors, the switch is a compact 2rem by 1rem, and table rows get a 1px rule.
- **Dialogs.** A 1px edge, `2rem` side padding, and titles at `1.25rem`, weight `700`, in the Inter stack. Every dialog scrim is at 0.75 opacity.
- **Fonts.** The UI font stays Inter. Code uses Click UI's mono stack, `"Inconsolata", Consolas, "SFMono Regular", monospace`; LibreChat bundles Inconsolata. Headings ask for Basier Square first, which is not bundled, so they render in Inter unless the viewer has it installed.

## Inline theme definition

Instead of a name, `interface.theme` can hold a theme definition. Anything you leave out falls back to LibreChat's defaults for that mode, so a definition only needs the values you want to change.

```yaml filename="interface / theme"
interface:
  theme:
    version: 1
    name: acme
    modes:
      light:
        colors:
          rgb-accent-primary: '29 78 216'
          rgb-accent-primary-hover: '30 64 175'
          rgb-ring-primary: '29 78 216'
          rgb-surface-submit: '29 78 216'
          rgb-surface-submit-hover: '30 64 175'
          rgb-link: '29 78 216'
        appearance:
          controlRadius: '0.375rem'
          radiusLg: '0.375rem'
          radiusXl: '0.5rem'
          shadowLg: '0 8px 16px -4px rgb(0 0 0 / 0.2)'
      dark:
        colors:
          rgb-accent-primary: '96 165 250'
          rgb-accent-primary-hover: '147 197 253'
          rgb-ring-primary: '96 165 250'
          rgb-surface-submit: '37 99 235'
          rgb-surface-submit-hover: '29 78 216'
          rgb-link: '96 165 250'
        appearance:
          controlRadius: '0.375rem'
          radiusLg: '0.375rem'
          radiusXl: '0.5rem'
          shadowLg: '0 8px 16px -4px rgb(0 0 0 / 0.5)'
    brands:
      provider-openai: '#10a37f'
```

| Key | Type | Description |
| --- | --- | --- |
| `version` | Number | Required. Must be `1`. |
| `name` | String | Required. A non-empty name for the theme. |
| `modes` | Object | Required. Holds `light` and/or `dark`. A mode you leave out uses LibreChat's defaults for that mode. |
| `modes.<mode>.colors` | Object | Color tokens for that mode. Keys are `rgb-*` token names, values are `R G B` triplets. See [Colors](#colors). |
| `modes.<mode>.appearance` | Object | Shape, control, typography, scrim, shadow and motion values for that mode. See [Appearance](#appearance). |
| `modes.<mode>.brands` | Object | Provider brand colors for that mode. Overrides the theme-wide `brands`. |
| `brands` | Object | Provider brand colors for both modes. See [Brands](#brands). |

### Validation

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 is dropped as if `interface.theme` were unset.** A wrong `version`, a missing `name`, a mode other than `light` or `dark`, a field the definition format does not have (at the top level, such as `css`, or inside a mode, anything other than `colors`, `appearance` and `brands`), 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. Users then get the next source in [How the theme is chosen](#how-the-theme-is-chosen): the `REACT_APP_THEME_*` colors or their stored theme, or LibreChat's default theme when neither applies. The log calls this the default theme:

```text
Ignoring interface.theme in /app/librechat.yaml; the default theme applies instead:
- interface.theme.modes.dark.colors.rgb-surface-primary: Invalid RGB value for rgb-surface-primary: 300 16 32
```

A bundled theme name that does not exist is handled the same way (`Unknown bundled theme "<name>", expected one of: librechat, clickhouse`).

A theme set through a config override (for a role, group or user in the [Admin Panel](/docs/features/admin_panel#configuration-management)) follows the same rules, with one difference: an invalid override theme falls back to the base `interface.theme` from `librechat.yaml`, not to the default theme. Those log lines start with `[getAppConfig]`, for example `[getAppConfig] Ignoring interface.theme from a config override; the base theme applies instead:`.

The `colors` and `appearance` maps work differently from the fields around them.

**An unknown token is ignored, and the rest of the theme applies.** A key inside `colors` or `appearance` that this version of LibreChat does not know, whether a typo or a token added in a newer version, costs only itself. The server logs it and leaves unknown colors out of the theme it sends to the browser:

```text
interface.theme in /app/librechat.yaml names tokens this version ignores:
- interface.theme.modes.light.colors.rgb-surfce-secondary: Unknown light color token ignored: rgb-surfce-secondary
```

An unknown token is still checked for shape: a color name must be a plain lowercase token (letters, digits and `-`) holding an `R G B` value, and an appearance name must be camelCase holding a plain value without `;`, `{`, `}`, `<`, `>` or `url()`. Anything else is an error and the whole theme falls back. Check the server log after changing a theme, because a misspelled token is only reported there.

The browser applies the same rules to the theme it receives and logs `[DeploymentTheme] Ignoring invalid interface.theme: ...` if it still has to reject one, for example when an older cached client meets a newer server.

### 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).

Beyond the surface, text, border, status and syntax palettes, these roles let a theme restyle specific interaction states and components:

| Role | Tokens | Paints |
| --- | --- | --- |
| Focus | `rgb-focus-outline`, `rgb-focus-control` | The keyboard focus outline across the app, and the focus ring of shared controls |
| Pressed | `rgb-surface-pressed`, `rgb-surface-inverted-pressed` | Neutral and inverted controls while pressed |
| Inverted and fixed | `rgb-surface-inverted`, `rgb-surface-inverted-hover`, `rgb-text-inverted`, `rgb-surface-fixed`, `rgb-surface-fixed-hover`, `rgb-text-fixed` | Controls drawn in the opposite mode's colors, and controls that keep one color in both modes |
| Disabled | `rgb-surface-disabled`, `rgb-text-disabled`, `rgb-border-disabled` | Disabled controls, when `disabledStyle` is `fill` (see [Appearance](#appearance)) |
| Control border | `rgb-border-control` | The edge of inputs, select triggers and one-time code slots, kept separate from quiet separators because it needs 3:1 contrast |
| Fields | `rgb-border-field-focus`, `rgb-field-fill`, `rgb-field-text` | A focused field's edge when `fieldFocusStyle` is `border` (follows `rgb-focus-control`), a field's fill when `fieldFillStyle` is `fill` (follows `rgb-surface-primary`), and the typed value (follows `rgb-text-primary`) |
| Primary button | `rgb-button-primary`, `rgb-button-primary-hover` | The primary Button's fill and hover; follow `rgb-surface-inverted` and `rgb-surface-inverted-hover`, which checkboxes and switches keep using |
| Inks | `rgb-dialog-title`, `rgb-badge-label` | Dialog titles and badge labels; both follow `rgb-text-primary` |
| Scrim | `rgb-surface-overlay` | The color behind dialogs; its strength is set by the scrim opacities in [Appearance](#appearance) |
| Media overlay | `rgb-surface-media-overlay`, `rgb-text-on-media` | Scrims, chips and progress drawn over the user's own images (lightbox, image preview, uploads in progress), and the text on them. Bundled themes keep them black and white in both modes |
| Avatar | `rgb-avatar-fill`, `rgb-avatar-text`, `rgb-avatar-placeholder`, `rgb-avatar-edge` | The default user avatar's fill and glyph (the glyph follows `rgb-text-primary`), the backdrop behind a loading or transparent agent or assistant avatar (follows `rgb-surface-secondary` in light mode and `rgb-surface-tertiary` in dark), and the hairline around the default avatar |
| File tiles | `rgb-file-document`, `rgb-file-sheet`, `rgb-file-code`, `rgb-file-artifact`, `rgb-file-audio`, `rgb-file-video`, `rgb-file-generic`, `rgb-file-ink` | One fill per kind of file, and the glyph drawn on every tile |
| Illustration | `rgb-illustration-subtle`, `rgb-illustration`, `rgb-illustration-strong` | The three tones of in-app artwork, such as the file drop zone's illustration |
| Switch | `rgb-switch-unchecked`, `rgb-switch-thumb` | The unchecked switch track, and the knob in both states |
| Table | `rgb-table-header-text`, `rgb-table-header-fill` | Column names, and the opaque fill of a sticky table header |
| Chart series | `rgb-series-1` through `rgb-series-8` | Categorical chart colors, in order |

Each value is a bare `R G B` triplet with every channel from `0` to `255`, for example `'255 255 255'`. Hex values and `rgb(...)` are rejected. Quote the value so YAML reads it as a string.

A few tokens follow a related token you did set when you leave them out, so a partial palette stays coherent. For example, `rgb-text-muted` follows `rgb-text-tertiary`, `rgb-surface-composer-hover` and `rgb-surface-pressed` follow `rgb-surface-hover`, `rgb-focus-outline` follows `rgb-ring-primary`, `rgb-focus-control` follows `rgb-text-primary`, `rgb-border-control` follows `rgb-border-light`, `rgb-switch-thumb` follows `rgb-surface-primary`, `rgb-table-header-text` follows `rgb-text-secondary`, and `rgb-table-header-fill` follows `rgb-surface-dialog`.

### Appearance

Appearance values are set **per mode**, and a mode without them uses the defaults below. The defaults are the same in both modes except `menuShadow` and `tooltipShadow`, which are heavier in dark mode. To change shape in both modes, repeat the values under `light` and `dark`, as in the example above.

| Key | Controls | Default |
| --- | --- | --- |
| `controlRadius` | Corner radius of controls such as buttons and inputs | `0.75rem` |
| `roundControlRadius` | Radius of fully rounded controls | `9999px` |
| `surfaceRadius` | Radius of surfaces such as cards and menus | `1rem` |
| `largeSurfaceRadius` | Radius of large surfaces such as dialogs | `1.5rem` |
| `menuRadius` | Corner radius of menu panels | `0.7rem` |
| `tooltipRadius` | Corner radius of tooltips | `0.275rem` |
| `tabRadius` | Corner radius of tab triggers | `0.185rem` |
| `radiusSm` | The `rounded-sm` step used across the app | `calc(0.5rem - 4px)` |
| `radiusMd` | The `rounded-md` step | `calc(0.5rem - 2px)` |
| `radiusLg` | The `rounded-lg` step | `0.5rem` |
| `radiusXl` | The `rounded-xl` step | `0.75rem` |
| `radius2xl` | The `rounded-2xl` step | `1rem` |
| `radius3xl` | The `rounded-3xl` step | `1.5rem` |
| `controlHeight` | Height of standard controls | `2.25rem` |
| `controlPaddingX` | Inline padding of theme-sized controls; follows `spaceNormal` when unset | `0.75rem` |
| `controlGap` | Gap between a control's icon and label; follows `spaceCompact` when unset | `0.375rem` |
| `controlFontWeight` | Label weight of theme-sized controls | `500` |
| `buttonHeight` | Height of the default Button | `2.5rem` |
| `buttonHeightSm` | Height of the `sm` Button | `2.25rem` |
| `fieldHeight` | Height of form fields | `2.5rem` |
| `fieldPaddingY` | Vertical padding of form fields | `0.5rem` |
| `fieldFocusStyle` | How a focused field shows focus: `ring` draws the focus ring, `border` swaps the field's edge to `rgb-border-field-focus` | `ring` |
| `fieldFillStyle` | Whether fields stay `transparent` or paint `rgb-field-fill` (`fill`) | `transparent` |
| `labelSize` | Font size of field labels; follows `textSm` when unset | `0.875rem` |
| `labelLeading` | Line height of field labels | `1` |
| `labelFontWeight` | Weight of field labels; `inherit` keeps the weight of the surrounding text | `inherit` |
| `focusRingWidth` | Width of the keyboard focus outline | `2px` |
| `focusRingOffset` | Distance of the focus outline from the element's edge | `2px` |
| `switchWidth` | Width of the switch | `2.75rem` |
| `switchHeight` | Height of the switch; the knob is this minus the track's 4px border | `1.5rem` |
| `tableCellSpaceY` | Vertical padding of table cells | `1rem` |
| `tableRowStroke` | Thickness of the rule between table rows | `0px` |
| `spaceCompact` | Compact spacing step | `0.375rem` |
| `spaceNormal` | Normal spacing step | `0.75rem` |
| `disabledStyle` | How disabled controls look: `dim` fades them to 50% opacity, `fill` paints them with the disabled color roles | `dim` |
| `fontFamily` | UI font family (`font-sans`) | `Inter, sans-serif` |
| `monoFontFamily` | Code font family (`font-mono`) | `'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, 'Cascadia Mono', 'Liberation Mono', Consolas, monospace` |
| `displayFontFamily` | Headings and dialog titles (`font-display`); follows `fontFamily` when unset | `Inter, sans-serif` |
| `textXs` | The `text-xs` size | `0.75rem` |
| `textSm` | The `text-sm` size | `0.875rem` |
| `textBase` | The `text-base` size | `1rem` |
| `textLg` | The `text-lg` size | `1.125rem` |
| `textXl` | The `text-xl` size | `1.25rem` |
| `text2xl` | The `text-2xl` size | `1.5rem` |
| `leadingXs` | Line height paired with `text-xs` | `calc(1 / 0.75)` |
| `leadingSm` | Line height paired with `text-sm` | `calc(1.25 / 0.875)` |
| `leadingBase` | Line height paired with `text-base` | `calc(1.5 / 1)` |
| `leadingLg` | Line height paired with `text-lg` | `calc(1.75 / 1.125)` |
| `leadingXl` | Line height paired with `text-xl` | `calc(1.75 / 1.25)` |
| `leading2xl` | Line height paired with `text-2xl` | `calc(2 / 1.5)` |
| `dialogStroke` | Width of the dialog's edge stroke | `0px` |
| `dialogPaddingX` | Inline padding of dialogs | `1.5rem` |
| `dialogHeaderGap` | Gap between a dialog's title and description | `0.375rem` |
| `dialogTitleSize` | Font size of dialog titles; follows `textLg` when unset | `1.125rem` |
| `dialogTitleLeading` | Line height of dialog titles | `1` |
| `dialogTitleFontWeight` | Weight of dialog titles | `600` |
| `dialogTitleFontFamily` | Font family of dialog titles; follows `displayFontFamily` when unset | `Inter, sans-serif` |
| `scrimOpacity` | Strength of the scrim behind standard dialogs | `0.8` |
| `alertScrimOpacity` | Strength of the scrim behind confirmation dialogs | `0.9` |
| `modalScrimOpacity` | Strength of the scrim behind other modal dialogs | `0.65` |
| `elevationSurface` | Shadow of raised theme surfaces | `0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)` |
| `elevationDrag` | Shadow of a badge while it is dragged | `0 10px 25px rgb(0 0 0 / 0.1)` |
| `shadow2xs` | The `shadow-2xs` step | `0 1px rgb(0 0 0 / 0.05)` |
| `shadowXs` | The `shadow-xs` step | `0 1px 2px 0 rgb(0 0 0 / 0.05)` |
| `shadowSm` | The `shadow-sm` step and bare `shadow` | `0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)` |
| `shadowMd` | The `shadow-md` step | `0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)` |
| `shadowLg` | The `shadow-lg` step | `0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)` |
| `shadowXl` | The `shadow-xl` step | `0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)` |
| `shadow2xl` | The `shadow-2xl` step | `0 25px 50px -12px rgb(0 0 0 / 0.25)` |
| `menuShadow` | Shadow of menu panels; in light mode, follows `shadowLg` when unset | Light: `0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)`; dark: `0 10px 15px -3px rgb(0 0 0 / 0.25), 0 4px 6px -4px rgb(0 0 0 / 0.1)` |
| `tooltipShadow` | Shadow of tooltips | Light: `0 2px 4px 0 rgb(0 0 0 / 0.25)`; dark: `0 1px 2px 0 rgb(0 0 0 / 0.35)` |
| `motionFast` | Duration of fast transitions | `150ms` |
| `motionNormal` | Duration of normal transitions | `200ms` |

The defaults reproduce LibreChat's look, so a theme that sets none of these keys changes no shape.

Accepted values:

- **Radii, `controlHeight`, `controlPaddingX`, `controlGap`, button and field sizes, spacing, text and label sizes, and the dialog lengths (`dialogStroke`, `dialogPaddingX`, `dialogHeaderGap`, `dialogTitleSize`):** `0`, or a number in `px`, `rem` or `em` (such as `0.25rem`), or a single `calc()` of two such lengths (such as `calc(0.5rem - 2px)`).
- **`switchWidth` and `switchHeight`:** a positive length in `px` or `rem`. Both must use the same unit (a side you leave out uses its `rem` default), the width must exceed the height so the knob can travel, and the height must clear the 4px track border (more than `4px`, or at least `0.5rem`).
- **`tableCellSpaceY` and `tableRowStroke`:** `0`, or a length in `px` or `rem`.
- **`focusRingWidth`:** a positive length in `px` or `rem`, so the focus indicator never disappears.
- **`focusRingOffset`:** `0`, or a length in `px` or `rem` that may be negative (drawing the outline inside the element's edge).
- **`disabledStyle`:** `dim` or `fill`.
- **`fieldFocusStyle`:** `ring` or `border`.
- **`fieldFillStyle`:** `transparent` or `fill`.
- **Font weights (`controlFontWeight`, `dialogTitleFontWeight`):** a whole number from `1` to `1000`. `labelFontWeight` also accepts `inherit`.
- **Line heights (the `leading*` steps, `labelLeading` and `dialogTitleLeading`):** a unitless number (such as `1.5`), a single `calc()` dividing two numbers (such as `calc(1.25 / 0.875)`), or a length.
- **Scrim opacities:** a number from `0` to `1`.
- **Font families:** any non-empty `font-family` list without `;`, `{` or `}`. The font must be available to the browser: LibreChat bundles Inter, Roboto Mono and Inconsolata, so any other family has to be installed on the viewer's machine or served by your deployment, or the next family in the list is used.
- **Shadow steps (`shadow2xs` through `shadow2xl`), `menuShadow`, `tooltipShadow` and `elevationDrag`:** a concrete `box-shadow` list, or `none`. `var()`, `env()`, `attr()` and `url()` are rejected.
- **`elevationSurface`:** any non-empty `box-shadow` value without `;`, `{`, `}` or `url()`.
- **Motion:** a duration in `ms` or `s`, such as `120ms`.

Every appearance value must be a string. Quote numbers such as font weights, line heights and scrim opacities (`'500'`, `'1.5'`, `'0.8'`); an unquoted YAML number is rejected.

### Brands

`brands` recolors the provider icons shown next to models. It can be set once at the top level for both modes, and overridden per mode under `modes.<mode>.brands`.

| Key | Default |
| --- | --- |
| `provider-openai` | `#19C37D` |
| `provider-openai-gpt4` | `#AB68FF` |
| `provider-openai-reasoning` | `#000000` |
| `provider-anthropic` | `#d09a74` |
| `provider-azure` | `linear-gradient(0.375turn, #61bde2, #4389d0)` |
| `provider-bedrock` | `#268672` |
| `provider-foreground` | `#ffffff` |

Values are hex colors (`#rgb`, `#rrggbb` or `#rrggbbaa`). The fills may also be a `linear-gradient(...)`; `provider-foreground`, the icon glyph color, must be a hex color.

## Using the theme outside LibreChat

The `@librechat/client` package publishes the theme as a stylesheet, so another app built on its components can paint the same tokens. Import `@librechat/client/theme.css` in the stylesheet that imports Tailwind:

```css filename="app.css"
@import 'tailwindcss';
@import '@librechat/client/theme.css';
```

It carries the semantic color tokens and their Tailwind mappings, the default value of every color and appearance token, and the `@font-face` rules for Inter, Roboto Mono and Inconsolata. The font files ship in the package as `@librechat/client/fonts/*`, so the app's bundler (Vite, webpack or esbuild) has to resolve and emit them; a setup that serves compiled CSS without a bundler has to serve those paths itself. A font is only downloaded when text renders in it.