Override global variable in LESS css using JS

Question

I have created a global variable in LESS css and assigned it a value. I used that value in multiple classes in CSS. I want to override that global variable dynamically through javascript.

@color: #f938ab;

body {
  font-family: 'Raleway', sans-serif;
  color: @color;
}

Can I override above variable using JavaScript code or something like below?

var color = //color from database;
document.documentElement.style.setProperty('@color', color);

Or is there any other method in CSS?

Answer 1

You need to rethink your approach.

Maybe you could apply a class to the main container (body?) and change your css to apply specific colours depending on that class? You could possibly update the value of this colour dynamically.

Also, depending on where you compile your LESS file you might have some more options. If you compile it serverside on every request (bad approach) and you read the DB on serverside too than you could change the value of this variable just by altering the file.

If you generate the CSS on client side (bad approach) you could possibly do a similar thing.

Both solutions are quite bad and 'hacky' and would heavily impact the perfomance