I am currently developing a theming feature for my web application, allowing users to select a theme that will dynamically change the color of various elements. Here is an example of the theme selector:
<div id="theme-selector">
<div id="theme-red" class="theme"></div>
<div id="theme-purple" class="theme"></div>
</div>
Once a user selects a color, a class is added to the body element:
$(document).on('click', '.theme', function(e) {
var color;
color = this.id;
$('body').removeClass();
$('body').addClass(color);
});
The process becomes cumbersome when dealing with CSS because you have to repeat selectors for each color scheme:
/* Red theme */
body.theme-red header, body.theme-red .button-primary {
background-color: #ff0000;
}
body.theme-red .button-primary:hover {
background-color: #cc0000;
}
body.theme-red a {
color: #ff0000;
}
/* Purple theme */
body.theme-purple header, body.theme-purple .button-primary {
background-color: #800080;
}
body.theme-purple .button-primary:hover {
background-color: #993399;
}
body.theme-purple a {
color: #800080;
}
Although using variables in pre-compilers like LESS or Stylus can help streamline the process, it does not address the issue of code repetition.
Are there any better, more programmatic techniques for implementing dynamic theming?