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)

Solution 1

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

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

Solution 2

I usually grab the CSS generated by LESS and include that in a file to optimize the web page loading speed. In fact, I use LESS.app for Mac to generate my CSS.

To my knowledge, part of the solution would involve including less.js file to your page. This in turn means that generating the style of the page would be slow and the caching might cause you some trouble too...

I would humbly suggest generating multiple CSS stylesheets with LESS and include these files when needed with JavaScript.