Add an option to place the palette switch in the sidebar

[MarinescuLucia]

What problem does this address?

A client said that he wants to be able to switch to the dark theme from the sidebar. At the moment, it's possible to do this only by using the Palette Switch component in the Header.

Mentioned here.

What is your proposed solution?

No response

[HardeepAsrani]

@MarinescuLucia Maybe I'm understanding your message wrong but the Palette Switch is in Colors & Background in Customizer, not Header. Also, which sidebar are you referring to here?

[MarinescuLucia]

@HardeepAsrani Sorry, I realized now I didn't explain this properly. I'm referring to the Palette Switch component that can be added in the Header Builder.

The client wanted to have the possibility to add such a component/widget in the sidebar, to switch the palette from there, instead of using that component in the header.

[mghenciu]

Hey,

So first of all, I would say this doesn't sounds like a very common approach. I mean usually the Light/Dark mode switch is in the header or footer (I would see this as a more viable option).

Also, I hope the user didn't referred to something like Blocksy has - basically a switch in the Customizer sidebar, like this.

---

But if this can be easily converted in a Sidebar widget, we can do it. If it's too complicated - I think we can skip it, maybe add it in the footer - since it's a less common use case.

[cristian-ungureanu]

Hi there!

There are indeed some difficulties and here's what I want to bring into discussion:

• The pallet switcher has an option that tells what's the dark pallet. If we allow more instances of the pallet switcher ( IIRC, we can only limit the number of instances of an HFG component per builder, not per all the website ) we should change the implementation and move the "dark pallet selector" somewhere globally so all the switchers could access it. Another option would be to change the implementation of the component so each instance could change to a different dark pallet. I think that's the main reason why we only allow one instance, in the header.

• If we decide to create the widget, we should recreate the styling controls ( icon selector, icon size, label etc. ) and it will add some more time.

I would estimate the task as 2 days if we want to create the widget and maybe 5 - 6 hours if we want to move the dark pallet selector somewhere inside the customizer as a global option and enable the component in the footer too.

Let me know what you think, I'm open to other suggestions as well.

cc. @HardeepAsrani , @mghenciu

[HardeepAsrani]

As discussed on the Slack, we can put it on hold and tackle this in end depending on how much time we have as it's not one of the priorities.

[lmisch]

+1 for a variation for the footer. For example with mobile view the space in the header is precious and people probably prefer to fill it with more important components but still provide the possibility to switch palette in the footer.

In addition, it would be nice to have a 2nd instance of the switcher so ppl can choose to display the label on desktop and only show the icon on mobile. I am currently working around this with css, but a "native" approach might come in handy.