Enable custom saved value for theme selection.

[regisphilibert]

This plugin looks very elegant though there is one limitation which seems to be found in every Sanity color-picker I browsed.

My intention is to present a color to the editor upon selection, a color linked to a theme whose identifier is not the color at end.

So ideally I would need to input this custom value in the color list while preserving the color display. Something like:

      defaultColorList: [
        { label: 'Light', value: '#ffffff', save: 'white' },
        { label: 'Dark', value: '#333333', save: 'dark', },
        { label: 'Brand', value: '#ca786d', save 'purple' },
        { label: 'Accent', value: '#626754', save: 'primary' },
      ],

I wonder if this is something on the roadmap?

[AlyssaKirstine]

Hi @regisphilibert I'm a bit confused by your ask...

Could you do something like the following instead? And then use the label property rather than the value property to get the corresponding color from your theme?:

 defaultColorList: [
        { label: 'white', value: '#ffffff' },
        { label: 'dark', value: '#333333' },
        { label: 'purple', value: '#ca786d' },
        { label: 'primary', value: '#626754' },
      ],

[AlyssaKirstine]

Or could you perhaps create a mapping function in your code to match the hex values to the corresponding theme value?

[regisphilibert]

Yes definetely, I just wished there was a way to avoid storing opiniated values in the dataset.

[AlyssaKirstine]

@regisphilibert Can you clarify what you mean?

[AlyssaKirstine]

@regisphilibert I took a look at your request again and I think I understand what you're asking...

In the scenario that a user chooses the color Purple let's say and the initial hex code for that is #800080. Down the line, maybe the company wants to change the shade of purple across their site to #746691 instead. You wish there was an easy way to just update the color code in the plugin's config and it will update across all the data values. Am I interpreting this right?

Furthermore, when you say you don't want to store opinionated values in the dataset, would your preference rather be to forego storing the color code in the dataset at all then, just the label, and then using that label and corresponding colorList config to determine the proper color value?

I want to make sure I understand your request in case it is something that makes sense to address on the plugin side of things.

[regisphilibert]

hi @AlyssaKirstine thanks for taking the time and sorry for not following up on your last question!

yes this is exactly the context for my request. I'd rather save something like blue or even dark etc... Something that is not bound to a css value.

[theostrahlen]

@regisphilibert We use css variables as color values for this. That way when a color changes it won't be saved as a hex in the dataset. It also helps if you use light/dark themes.

defaultColorList: [
  { label: 'Light', value: 'var(--color-light)' },
  { label: 'Dark', value: 'var(--color-dark)' },
  { label: 'Brand', value: 'var(--color-brand)' },
  ...
],

[AlyssaKirstine]

@theostrahlen I love this approach! @regisphilibert I appreciate the suggestion but this would be a breaking change so I'm going to hold off on implementing this for now and close this issue. Using CSS variables seems like an appropriate solution to this issue.