How to create a dynamic theme changer for a website?

Question

css

Good day, they gave me a rather difficult task for me - a dynamic control panel on the site.
1) Through input type="color" two colors are selected: primary and secondary. There are also 4 ready-made palettes, it seems easier with them. How to cling to the selected color from the palette, there is only its code there, how can this influence CSS?
2) There is a choice of buttons, 2 options: with border-radius and without.
Such a task has not yet been, it is difficult to figure out how to do it all. I would be glad for any advice, even just abstract, suggestive (where to assign classes, how to change colors for buttons that already have default colors, and so on)
. the task is really difficult, I would be grateful for help in the future, here is my mail: [email protected]
Thank you!

Answer 1

Actually, how to organize this through JS is not difficult to guess.
You create 4 checkboxes for 4 site colors, depending on the selected checkbox, classes are added to your divs via jQuery.
But this option will disappear when the page is reloaded.
It is also not difficult to do this through the database, how to enter the name of the color scheme into the database, I think you will figure it out. By the way, it is more logical to do this on the user settings page. Next, you simply check what color the user has chosen for the site, after which, through php, you write the necessary parameters to the page.

Answer 2

1. As an option, variables ( https://www.w3.org/TR/css-variables/) - i.e. in the header of the site, let's prescribe variables with values, in styles, just put variables.
2. Try method #1 but together with LESS for example.
3. Pull out all the classes and identifiers where they should change the color in the site header (there is already through php insertion from the theme) and leave everything else in the styles. (i.e. display only colors).
4. With regards to buttons, just add different classes to them.