Color Select - A colour palette plugin for Sanity

Allow users to select pre-determined colours via a colour palette in Sanity Studio.

This is a Sanity Studio v3 plugin.

Installation

npm install @hatchd/sanity-plugin-color-select

or

yarn add @hatchd/sanity-plugin-color-select

Usage

Add it as a plugin in sanity.config.ts (or .js):

import {defineConfig} from 'sanity'
import {ColorSelect} from '@hatchd/sanity-plugin-color-select'

export default defineConfig({
  //...
  plugins: [ColorSelect()],
})

Then use the colorSelect type in your schema. The stored value is the value property of the selected colour.

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,
    layout: 'buttons',
    labels: false,
  },
  initialValue: 'primary',
})

Options

| Property | Type | Default | Description | | -------- | --------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------- | | list | array | — | Array of colour objects with title, value, and optional hex. hex is used for the swatch when value isn't a CSS colour. | | layout | string | 'buttons' | 'buttons' or 'dropdown'. | | labels | boolean | true | Show or hide colour titles in the buttons layout. |

Colour object

| Property | Type | Required | Description | | -------- | -------- | -------- | ----------------------------------------------------------------- | | title | string | Yes | Display name shown in the palette. | | value | string | Yes | The value stored in Sanity when this colour is selected. | | hex | string | No | CSS colour used for the swatch. Falls back to value if omitted. |

License

MIT © Grant Deelstra and Hatchd