Override global variable in LESS css using JS

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?

Override global variable in LESS css using JS

3 Answers