Customizer: Custom Colors don't consider chosen palette

[lmisch]

Description

When adding a custom color, the defined value will be set for / used by all palettes.

Expected behaviour is to be able to set the value for each palette individually.

Step-by-step reproduction instructions

Assuming having palettes Base and Dark Mode

1. In Customizer, go to Colors and Background
2. Select Base palette if not already chosen (optional)
3. In section Custom Colors add a custom color and set any value
4. Publish changes
5. Switch to Dark Mode palette
6. Modify the color value for the newly added custom color
7. Publish changes
8. Switch back to Base palette
9. Notice that the value from Dark Mode palette was applied to Base palette, too

Screenshots, screen recording, code snippet or Help Scout ticket

No response

Environment info

No response

Is the issue you are reporting a regression

No

[HardeepAsrani]

Hey @lmisch,

Thank you for your feedback. The Custom Color feature is supposed to work independent of the Color Palettes and not per-palette.

Would you let us know why do you think it will be helpful to have different custom colors per palettes, as I imagine a single website will mostly use of one palette, just so we can learn about your particular use case and see if this will be useful in future changes to the feature?

[lmisch]

Sure. I am making use of base and dark mode. So any additional color imho basically should have an equivalent in each palette.

Your idea/intended purpose could still be achieved upon initial definition by just cloning the color set in base palette to all additional palettes?

Also, section title "global colors" for the presets might be misleading with the use of palettes, as they are not global anymore, but being set for each palette individually. Instead, custom colors section currently has the purpose of serving actual global colors, according to your argumentation.

This is just my 2 cents related to UX.

Cheers! :)

edit Adding use case: I am using a palette color on "cover" block images. On base palette this is set to black with an opacity of zero (to not have any affect). On darkMode palette I am setting black's opacity to let's say 33% to dim the image as desired.

As extra color 1 and 2 are already used for other purposes, having custom colors that consider the palettes seems to be the perfect solution for dealing with some delicate aspects of a proper dark mode design.

[mghenciu]

Thank you for the feedback, @lmisch .

TDLR: we went for a more simpler approach, to avoid any potential struggles for users in managing those colors + what happens as a fallback. In the current approach, it's easier to just pick a color that works in both Light & Dark; rather than having to manage it separately for each palette.

---

When initially working on this feature, we had in mind the idea of having each Custom Color live inside a Palette. The challenge with this is the Fallback, basically what happens when a custom color is deleted from a palette.

But the more pressing challenge would be the Global Custom Colors sync part. Meaning that if we add them for each palette, those won't be Global anymore. For example let's say in the First palette I define a Custom Color used for WooCommerce shop pages. Now, what should happen on the Second palette? or on the third, forth and so on. Let's say when adding a Custom Color, it will also be added as a new child under each existing palette. This can also get messy, as what happens if I delete it in one palette or update it in one place.

Hope this makes sense.

[lmisch]

Totally fine, thank you. I created the desired behaviour for variable custom colors via data-neve-theme selector in css.