html - Changing variable dynamically (at runtime) via LESS and CSS?

Question

@myThemeBackground = #ddd;  

div#box1 { background: @myThemeBackground; }  

I'm using LESS in order to use variables for my css. It works fine, but I'm wondering if there's a way for me to change the "myThemeBackground" dynamically at runtime via javascript or something.

So say if the user chooses a custom color for the background I'd like the entire skin to change.

Note: this is for dynamically theming/skinning an application where the user chooses the color for the background for example and then the whole app changes (without a page refresh)

Answer 1

You can modify Less variables on the fly using the modifyVars method:

less.modifyVars({ myThemeBackground : '#000' });