Override global variable in LESS css using JS

Question

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

@color: #f938ab;

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

Is it possible to override the 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.

, (body?) CSS ? .

, , LESS, . ( ), , , .

CSS ( ), .

""

Answer 2

:

. , Less . :

less.modifyVars({
  '@buttonFace': '#5B83AD',
  '@buttonText': '#D9EEF2'
});

, , css javascript. , , 16 777 216 .

Answer 3

The best way to do this is to add a dynamic class to the body and change the @color value based on the class added to the body and then compile LESS into css.

@color: #f938ab;

body.class1{
@color: color1;
}

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

and add the class to the body using javascript.