Skip to content

feat: add admin-configurable theme palette to interface config#12675

Open
georgenmatthew wants to merge 1 commit intodanny-avila:devfrom
georgenmatthew:feat/theme-palette
Open

feat: add admin-configurable theme palette to interface config#12675
georgenmatthew wants to merge 1 commit intodanny-avila:devfrom
georgenmatthew:feat/theme-palette

Conversation

@georgenmatthew
Copy link
Copy Markdown

@georgenmatthew georgenmatthew commented Apr 15, 2026

Summary

Closes: #5389

Adds admin-configurable theme color palettes to the interface section of librechat.yaml. Admins can define custom RGB color overrides for light and dark modes, which are validated at config load time and applied at runtime via the existing ThemeProvider. Allows deployments to brand the UI with custom colors without forking the frontend.

  • packages/data-provider: New theme.ts module with rgbColorSchema, paletteSchema, and themeSchema (Zod validation). Added theme field to interfaceSchema in config.ts. Re-exported from barrel index.
  • packages/data-schemas: loadDefaultInterface passes theme through to the app config.
  • packages/client: ThemeProvider accepts a palette prop, maps palette keys to rgb- prefixed CSS variables per light/dark mode, and listens for system theme changes.
  • App.jsx: New PaletteThemeProvider wrapper reads startupConfig.interface.theme.palette and passes it to ThemeProvider.
  • librechat.example.yaml: Documented example with commented-out palette config.

Change Type

Please delete any irrelevant options.

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update
  • Translation update

Testing

  1. Add a theme.palette block to librechat.yaml under interface: with valid RGB values (e.g., surface-primary: "240 253 244").
  2. Start the app — verify custom colors apply for the configured mode (light/dark).
  3. Switch between light/dark — verify the correct palette is applied per mode.
  4. Omit theme entirely — verify default theme behavior is unchanged.
  5. Use an invalid RGB value (e.g., "999 0 0") — verify config validation rejects it on startup.
  6. Run unit tests:
  • cd packages/data-provider && npx jest theme.spec.ts
  • cd packages/data-schemas && npx jest interface.spec.ts
  • cd packages/client && npx jest ThemeProvider.spec.tsx

Test Configuration:

Checklist

Please delete any irrelevant options.

  • My code adheres to this project's style guidelines
  • I have performed a self-review of my own code
  • I have commented in any complex areas of my code
  • I have made pertinent documentation changes
  • My changes do not introduce new warnings
  • I have written tests demonstrating that my changes are effective or that my feature works
  • Local unit tests pass with my changes
  • Any changes dependent on mine have been merged and published in downstream modules.
  • A pull request for updating the documentation has been submitted.

@georgenmatthew
Copy link
Copy Markdown
Author

Hi @danny-avila , I've been quietly watching the LibreChat project from the sideline for a while but have been intimidated by the code base. This is my first attempt at a code contribution. I would welcome your feedback on how I can improve.

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant