theme-color-fields

To add theme-aware color controls to Payload CMS, you can use helper functions to render fields that toggle between theme tokens and custom colors, storing values as structured objects for consistent styling across collections and blocks.

resolveColorValue converts stored Payload color tokens into CSS variables by mapping token-based selections to var(--token) syntax, while passing custom color strings directly through as valid CSS color values for front-end rendering.

The best way to manage custom colors versus theme tokens in Payload UI is using a color group field that provides a radio toggle, allowing editors to switch between predefined tokens and a custom color picker while storing the selection source.

Yes, you can use these Payload color fields for live previews by passing the stored field object to the front-end resolution utility, which outputs the exact CSS color value needed to apply styles dynamically.

No external dependencies are required to implement token-based styling in Payload CMS, as the helper functions provide a self-contained API to define color groups and resolve token values directly within your project structure.