7
@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)

Shai UI
  • 50,568
  • 73
  • 204
  • 309

3 Answers3

14

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

less.modifyVars({ myThemeBackground : '#000' });
Sebastian vom Meer
  • 5,005
  • 2
  • 28
  • 36
  • This is not working for me with less-1.3.3.min.js. Nothing happens when I use `modifyVars` either like you've shown or by passing an argument like `{'@myThemeBackground': '#000'}`. – Sarah Vessels May 09 '13 at 02:32
  • I have the same problem - is there any way to make less.modifyVars work in the current version 1.3.3? – knl May 10 '13 at 14:51
  • What exactely doesn't work? Does the less global exist? The modifyVars method? Any error messages? 1.3.3 changelog doesn't mention any important changes. – Sebastian vom Meer May 12 '13 at 18:57
1

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.

Alerty
  • 5,945
  • 7
  • 38
  • 62
  • +1 Very sound advice. In some situations you might consider generating more static files on the server at runtime. This allows for caching, faster rendering, and faster download. – Daniel Moses Mar 30 '12 at 16:42
  • Not sure if you understood my question. I'm looking for a way in runtime to change a Less variable and have it apply to my page. So If I set myThemeBackground to Blue then my page's background will dynamically have that color. – Shai UI Mar 30 '12 at 16:49
  • @foreyez I understood the question. I am working on solution right now. – Alerty Mar 30 '12 at 16:52
  • thanks, I'm thinking if maybe there's a way to add the less variable in javascript and then do a less.refreshStyles() or something.. like you load the initial .less css file. and then in javascript you change one of the variables, and then you do a less.refreshStyles() somethign along those lines anyway.. – Shai UI Mar 30 '12 at 16:53
  • I was looking into a server side solution that involves AJAX and node.js. – Alerty Mar 30 '12 at 16:57
  • ah, i'm looking for a client side only solution... but thanks – Shai UI Mar 30 '12 at 16:59
  • Alright. Only consider that it might be bothersome for users to have a delay from the generation of the CSS from LESS on each page request. ;) – Alerty Mar 30 '12 at 17:04
0

The only solution I can think of is to change the text you render with less.js, with:

less.refreshStyles()

Change the text in the file or in the less snippet of styling.

Read more about it here: Load less.js rules dynamically

Community
  • 1
  • 1
bArmageddon
  • 8,088
  • 6
  • 22
  • 40