Feature request: multiple color palettes

If we could create multiple color palettes it would be easier to switch between and try out different color schemes during development. We could also design several color schemes for our clients to pick which one they want to use. Another example of how this might be useful is if we wanted to create a dark mode. For the dark mode idea to be useful there would have to be a site visitor facing button/toggle that could load an alternative color palette, so this may be loosely related to my other request.

Hey @JvP,

Unfortunately, this is a steep one. We’ll keep it in mind but I don’t see it being something we tackle anytime soon because of challenges adding another management layer. What I’ll do for now is add a filter that will allow custom code to manipulate the colors. It would work something like this:

add_filter( 'cs_color_items', function( $items ) {
  //dynamically change colors in here
  return $items;
});

At a minimum that would allow the colors to be overwritten right before the CSS is generated, but it would take some work to write the logic that finds the right colors and applies a new palette.

Thanks, so it’s not something that will never happen, just not anytime soon. That’s totally ok because it’s not a critical feature, just something nice to have.

I can certainly see how it would be useful for some applications.

1 Like

Absolutely :slight_smile:

Hey @charlie,

Reviving this old thread to ask if this is now more doable after about 5 years?

Having the option to create any number of palettes which you could switch between at any moment would be nice for a number of reasons.

  • During prototyping and development you could alternate between palettes when final colors haven’t been decided yet
  • You could now create a light and darkmode version of the site’s color system. This could perhaps tie in with CS Forms in some way with a new type of ‘color palette’ dynamic content. Create a toggle switch, hook up the palette dynamic content and you’ve got yourself a light/dark mode switch
  • Push color palettes to client sites via SiteDrive so they have a collection of palettes to choose from, carefully created by those with more knowledge of color. Great for SaaS-like setups where you’re not the one building the sites for the customer, but they do it themselves WordPress.com-style. You can give them great base palettes to get them started

This would be nice to have Seasonal themes for websites… Autumnal, Christmas, Spring etc. Could be nice for online stores etc

@JvP / @scotbaston – definitely worth hearing @charlie’s thoughts on this but multiple palettes are totally doable in the current setup. Now automatically switching between those might take some thought. But you can use JSON to creating groupings like so:

[
  {
    "title": "Default Palette",
    "_id": "palette-default",
    "children": [
      "primary-1a-1",
      "primary-1b-1",
      "primary-1c-1",
      "primary-1d-1",
      "secondary-1a-1",
      "secondary-1b",
      "secondary-1c",
      "secondary-1d",
      "tertiary-1a",
      "tertiary-1b",
      "tertiary-1c",
      "tertiary-1d",
      "accent-1",
      "accent-2",
      "accent-3",
      "accent-4",
      "text-1a",
      "text-1b",
      "button-1a",
      "button-1b",
      "white",
      "black",
      "shadow-1a",
      "shadow-1b",
      "shadow-1c"
    ]
  }
]

Hi @DoncoMarketing

I’d seen that solution previously and had started using it, but to have it built in would be lovely!

It would be nice to solve having light and dark themes. I think that would be better suited for a part of one palette then having multiple palettes. I think it might cause issues with multiple palettes. We are supporting light-dark in the next major release.

If you already knew what colors you were using, you could use the following filter, and utilize the same IDs for your colors. Then just switch between your different arrays. Just to give some ideas there.

1 Like