colorField | nextjs-cms

import { colorField } from 'nextjs-cms/core/fields'

Basic usage

colorField({ name: 'brand_color' })

With every option

colorField({
    name: 'accent_color',
    label: { en: 'Accent color', ar: 'لون التمييز' },
    required: true,
    defaultValue: '#0070f3',
    order: 4,
    localized: false,
    conditionalRules: [{ field: useCustomTheme, condition: 'equals', value: true }],
})

Options

Option	Type	Default	Description
`defaultValue`	`string` (hex)	none	Initial color and column default, like `'#0070f3'`.

Plus the common options.

Validation

The value must be a hex color: # followed by 6 or 3 hex digits (#1a2b3c, #fff), case-insensitive. Anything else (red, rgb(...), #12345) is rejected on save.

Examples

Per-category theme colors

const name = textField({ name: 'name', required: true })

export default categorySection({
    name: 'categories',
    order: 2,
    title: { section: 'Categories', singular: 'Category', plural: 'Categories' },
    headingField: name,
    db: { table: 'categories' },
    fields: [name, colorField({ name: 'color', defaultValue: '#171717' })],
})

website/components/category-badge.tsx

export function CategoryBadge({ name, color }: { name: string; color: string | null }) {
    return (
        <span className='rounded-full px-2 py-0.5 text-xs text-white' style={{ backgroundColor: color ?? '#171717' }}>
            {name}
        </span>
    )
}

Storage


Column	`CHAR(7)`
Value	`#RRGGBB` (or `#RGB` if typed that way)