Matrix Version: 220.127.116.11
Hi there Squizers & Squizees (pretty sure they should be terms to describe staff & users!),
I can’t believe it has taken me so long to actually need to do this; and I’m pretty sure someone here will have done it a million times & figured out the most robust & user-friendly way to do it. If you have, would love to hear your thoughts…
I want backend/admin users (non-coders) to be able to switch colour-themes of components of the Design file, to mix & match as they want. These would then be applied to the whole site – so a design customisation makes sense for storing these variables.
The colour-themes require different (or extra) classes to be applied to specific elements, depending on the one selected.
What is the best way to achieve this?
… Declared variables? Show-If areas?
I know JS is an option, but wondering if there is an easier matrix-way, so it is easy for HTML/CSS-only coders to update in the future (i.e. those who don’t know much JS).
I’ve actually never used the Declared Variables, as most of my dynamic content has been modified by metadata as variables instead (on a page basis), or by switching areas on/off. I am wondering if it is going to get messy, when I have (for example) 5 different component areas, each which have a “light” or “dark” theme option, that can be selected. And then for each of those component areas, an additional class would have to be added to about 3-4 parts of the code (but each section of the code requires a different class, depending on the element).
I don’t want the editors to need to know the class they need to put into each component’s elements. I just want them to be able to select “Component ABC: Light theme” and “Component XYZ: Dark theme.”
Not sure I have managed to explain it adequately, but hoping the context helps explain.
Let me know if you have done this, & what your preferred method is/was
Thanks in advance,