A colour palette option for users to select pre-determined colours in Sanity
npm install @hatchd/sanity-plugin-color-selectAllow users to select pre-determined colours via a color palette in Sanity.
This is a Sanity Studio v3 plugin, the plugin will not work versions 2 and lower.
``sh
// NPM
npm install @hatchd/sanity-plugin-color-select
// Yarn
yarn add @hatchd/sanity-plugin-color-select
`
Add it as a plugin in sanity.config.ts (or .js):
`ts
import {defineConfig} from 'sanity'
import {ColorSelect} from '@hatchd/sanity-plugin-color-select'
export default defineConfig({
//...
plugins: [ColorSelect()],
})
`
And create a field in Sanity. It returns the value property of the selected color.
`ts
export const backgroundColors = [
{
title: 'Green',
hex: '#8ac926',
value: 'primary',
},
{
title: 'Blue',
hex: '#57c4e5',
value: 'secondary',
},
{
title: 'Red',
hex: '#d62828',
value: 'tertiary',
},
];
defineField({
name: 'background',
description: 'Controls the background colour for this module',
type: 'colorSelect',
options: {
list: backgroundColors,
labels: false,
},
initialValue: 'primary',
}),
`
| Property | Description |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| list (array) | A array of objects containing the properties title, hex and value. hex is used if the value isn't a color hex code. |buttons
| layout (string) | and dropdown. Default: buttons |buttons
| labels (boolean) | While using the layout, display labels or not. Default: true` |