Plugin compatibility issue during Studio Migration from v2 to v3.
I understand you're facing a challenge migrating from Sanity Studio v2 to v3 with the sanity-plugin-color-list plugin that's extensively used in your schemas. This is a common issue during v3 migrations when community plugins haven't been updated.
The Situation
The sanity-plugin-color-list plugin you're using is a community plugin created by Kim Björkman that was built for Studio v2 and has not been updated for Studio v3 compatibility. As the plugin page indicates, it only works with the older, now-deprecated version of Sanity Studio (v2).
Your Migration Options
Since this plugin is extensively used in your schemas, here are your recommended paths forward:
Option 1: Migrate to Sanity's Official Color Input Plugin (Recommended)
Sanity maintains an official color input plugin called @sanity/color-input that fully supports Studio v3. While it has a different API than sanity-plugin-color-list, it provides similar functionality including predefined color swatches.
Installation:
npm install @sanity/color-inputAdd to your sanity.config.ts:
import {defineConfig} from 'sanity'
import {colorInput} from '@sanity/color-input'
export default defineConfig({
// ... other config
plugins: [
colorInput(),
// ... other plugins
]
})Schema definition:
The official plugin uses type: "color" and provides a colorList option for predefined swatches:
{
title: "Color",
name: "myColor",
type: "color",
options: {
colorList: [ // Predefined color swatches
{ title: "Red", value: "#f16d70" },
{ title: "Teal", value: "#88c6db" },
{ title: "Purple", value: "#aca0cc" }
]
}
}The official plugin returns a comprehensive color object with hex, hsl, hsv, and rgb values, giving you more flexibility in how you use colors on your frontend.
Option 2: Fork and Update the Community Plugin
If the official plugin doesn't meet your specific requirements, you could:
- Fork the
sanity-plugin-color-listrepository - Update it to work with Studio v3 (requires updating dependencies and refactoring to use Studio v3 APIs)
- Install your forked version in your project
This gives you full control but requires ongoing maintenance on your end.
Option 3: Build a Custom Color Input Component
For Studio v3, you can create custom input components. If sanity-plugin-color-list had specific features you need, you could build a custom input that replicates that functionality while being v3-compatible. The Sanity documentation on custom inputs can guide you through this process.
Migration Strategy
Whichever option you choose, I'd recommend:
- Test in a development environment first - Create a test branch and migrate a few schemas to verify the approach works
- Audit your current usage - Document exactly how you're using
sanity-plugin-color-listacross your schemas to understand the scope of changes - Check data structure differences - The
sanity-plugin-color-listREADME mentions it returns "the whole color object" - you'll need to verify compatibility with the official plugin's data structure - Plan a data migration if needed - If the data structures are incompatible, you may need to write a migration script
- Update your frontend - Ensure your GROQ queries and frontend code handle the new data structure correctly
The official @sanity/color-input plugin is your best bet for long-term support and compatibility with future Sanity updates. While it requires schema refactoring, it's actively maintained by Sanity and designed specifically for Studio v3.
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.