Hello!

The task appeared to make a function with which you can change the color scheme of the site. Those. color of buttons, logo, background places, etc.

That is, purely changing the color code in CSS style. And I think, how can this be realized?

So far, as an option, I see creating several classes that will be rendered, in accordance with the configurations, inserted into the HTML code.

For example, when setting up:

$config["button_color"] = "green";

A class that stylizes the button in green will be substituted:

 <button class = "bt-green">Submit</button>

But the disadvantage of this method is that you have to create a bunch of color schemes and implement a lot of CSS code.

Perhaps there are some better options?

  • one
    You make several base classes in css, which with the help of js will be changed for the body tag. In the css itself, all the other settings are preceded by this class. Essno for each class has its own set - rjhdby

1 answer 1

css

 .bodyclass .myclass{ color: green; } .bodyclass2 .myclass{ color: red; }

html

 <body class="bodyclass2" id="body"> <h1 class="myclass">My First CSS Example</h1> </body>

js

 document.getElementById("body").classList.remove('bodyclass2'); document.getElementById("body").classList.add('bodyclass');

UPD after author comment

If a server-side change of the scheme is intended, then, of course, there is little point in bothering JavaScript

In this case, it makes sense to look towards something like SASS . Create a single template, displaying custom colors as variables. In the admin panel, after clicking the "Save" button, overwrite the template file with the changed variables, and then generate the CSS with the SASS processor

  • one
    on the server side however, the content must also be generated with the desired color scheme, and not only in js change. for otherwise the standard scheme will always be loaded. and then change to the desired one, causing visual undesirable switching effects. And since the server and so will be able to generate the desired scheme, is there any point in switching something through js? - teran
  • you propose to switch the class of the body , duck from where it will be an order of magnitude longer and harder to bring on the server side <body class="themed theme-{$themeName}> to get some kind of <body class="themed theme-red'> and all On this? - teran
  • trite due to the fact that the page does not need to reload. Reloading the page is at a minimum: establishing a connection, generating a page, loading content, saving the page state - rjhdby
  • need to understand the meaning of the problem. If the essence of the site is that the user will sit and poke the mouse to change the color scheme, then you are right. If this resource on which the user once per session (or even in the profile settings) chooses a color, then this is 1 request for several thousand, which is not significant. - teran
  • Friends, not the user himself will choose the color scheme, but the site administrator. Color schemes are designed to uniquely design a template, because I have a task in developing a CMS. Thanks for the answer, I will think about the implementation of this in terms of JS. But, is it possible to do something so that the person himself can realize the scheme with the colors he needs in the control panel? Hmm, I’m thinking now to allow a person to create their own classes. But how to import it into CSS? - Felix