color

color<TCollectionSlug, TFieldKey, TFieldMeta>(options?): ColorField<TCollectionSlug, TFieldMeta>

Defined in: packages/core/src/fields/color/config.ts:53

Creates a colour field with all defaults applied.

Colour fields store a CSS colour string and render a swatch picker in the admin form. Common uses: theme palettes, per-document accent colours, block background overrides.

Accepts ColorFieldInput (all optional) and returns ColorField with all defaults applied.

Defaults applied:

• label — "" (inferred from the field key by defineCollection)
• required — false
• defaultValue — ""
• format — "hex"
• themeColors — false
• admin.hidden — false
• admin.readOnly — false
• admin.position — "main"
• admin.width — "100%"
• admin.cellAlignment — "left"

Type Parameters

TCollectionSlug

TCollectionSlug extends string = string

TFieldKey

TFieldKey extends string = never

TFieldMeta

TFieldMeta extends BaseFieldMeta = BaseFieldMeta

Parameters

options?

ColorFieldInput<TCollectionSlug, TFieldKey, TFieldMeta>

Colour field configuration. All properties are optional.

Returns

ColorField<TCollectionSlug, TFieldMeta>

Resolved colour field definition with all defaults applied.

Example

import { color, defineCollection } from '@vexcms/core'

themes: defineCollection({
  fields: {
    // Minimal — label inferred from key ("Brand Color"), stored as hex
    brandColor: color(),

    // Stored as oklch so the front end can interpolate it directly
    primaryLight: color({ format: "oklch", required: true }),

    // Offer the host app's design tokens as a second picker tab
    overlayTint: color({ themeColors: true, admin: { width: "50%" } }),
  }
})

See

• ColorFieldInput for the full input type
• ColorField for the resolved output type