I am facing a challenge where I need to dynamically change the branding color and other styling variables on the portal based on certain conditions at runtime. I have successfully implemented this functionality using CSS with the code snippet provided below. However, our CSS is generated from LESS files during compilation, making it difficult for me to figure out how to write similar logic in LESS to achieve the same result as shown in the code snippet:
:root {
--brand-color: yellow;
}
h1 {
color: var(--brand-color);
}
<h1 id="demo">Hello</h1>
<button onclick="myFunction()">Click me</button>
function myFunction() {
document.documentElement.style.setProperty('--brand-color', 'red');
}