Simpler Color Input ๐จ
A simpler color input for Sanity studio.
Created by @AlyssaKirstine
## ๐คฉ Features
โ Sanity v5 support (React 19)
โ Select a custom color using a color picker or HEX values
โ Select a color from a predefined theme
โ Use in the Portable Text editor to color or highlight text
โ Dark mode support
## โ ๏ธ Version Compatibility
| Plugin Version | Sanity Studio Version | React Version |
| -------------- | --------------------- | ------------- |
| 4.x | 5.x | 19.x |
| 3.x | 3.x - 4.x | 18.x |
> **Note:** For Sanity Studio v3/v4 with React 18, use version 3.x of this plugin.
## ๐ Install
```sh
npm install sanity-plugin-simpler-color-input
```
or
```sh
yarn add sanity-plugin-simpler-color-input
```
## ๐ก How to Use
Add it as a plugin in `sanity.config.ts` (or .js):
```ts
import { defineConfig } from 'sanity'
import { simplerColorInput } from 'sanity-plugin-simpler-color-input'
export default defineConfig({
//...
plugins: [
simplerColorInput({
// Note: These are all optional
defaultColorFormat: 'rgba',
defaultColorList: [
{ label: 'Light', value: '#ffffff' },
{ label: 'Dark', value: '#333333' },
{ label: 'Brand', value: '#ca786d' },
{ label: 'Accent', value: '#626754' },
{ label: 'Custom...', value: 'custom' },
],
enableSearch: true,
showColorValue: true,
})
],
})
```
Learn more about the `colorList` and `colorFormat` properties in the [Options](#color-list) section.
### Use as a Standalone Field
You can use the `simplerColor` type in your schema types:
```js
// [...]
{
fields: [
// [...]
{
name: 'backgroundColor',
title: 'Background color',
type: 'simplerColor',
},
]
}
```
### Use in Portable Text editor
Or you can use the `textColor` and `highlightColor` types to annotate text in the Portable Text editor:
#### Text Color
```js
{
type: 'block',
marks: {
// ...,
annotations: [
// ...,
{
type: 'textColor',
},
],
}
}
```
#### Highlight Color
```js
{
type: 'block',
marks: {
// ...,
annotations: [
// ...,
{
type: 'highlightColor',
},
],
}
}
```
#### Render in Frontend
If you're using the [`@portabletext/react`](https://www.npmjs.com/package/@portabletext/react) package, you can pass the following code into the custom components property to render these colors in your frontend.
```js
const myPortableTextComponents = {
// ...,
marks: {
textColor: ({children, value}) =>