0

I'm making a web app that is VERY customizable (colors, etc). I am trying to find the easiest way to make this easy for me to develop. The best thing I've come up with so far is to have mustache-like CSS code and replace the stuff with values from localStorage through JavaScript, like this:

CSS code:

<style id="customsheet">
.someclass{
background-color:[classBackground];
color:[classColor]
}
#anelement{
font-family:[eltFont];
font-size:[eltFontSize];
}
</style>

And replace, for example, [eltFont] with localStorage.eltFont using JavaScript, which modifies the innerHTML of the <style> element.

What I'm asking is, is there a better/"correct" way to do this? The way I thought up seems...weird.

markasoftware
  • 12,292
  • 8
  • 41
  • 69
  • I wouldn't use a real ` – nietonfir Jan 26 '14 at 20:57
  • If you haven't already, you might want to read about LESS ([SO Example](http://stackoverflow.com/questions/9946873/changing-variable-dynamically-at-runtime-via-less-and-css)) or a similar css lib. – mseifert Jan 26 '14 at 20:57
  • @nietonfir good point, do you think a ` – markasoftware Jan 26 '14 at 21:02
  • My first idea is to create different themes. Each theme would have a consistent style. The user could pick a theme and this information is stored locally. – surfmuggle Jan 26 '14 at 21:33
  • @threeFourOneSixOneThree I need it to be fully customizeable, sorry – markasoftware Jan 26 '14 at 21:41
  • If you can work with classes and can have multiple classes per element, take a look [here](Change an element's CSS class with JavaScript). – mseifert Jan 26 '14 at 22:51
  • Missing link from above: [Change an element's CSS class with JavaScript](http://stackoverflow.com/questions/195951) – surfmuggle Jan 27 '14 at 13:41

0 Answers0