Tutorial: Dynamic CSS theme with less.js and jQuery

In Css, Development, Html, Jquery, Tutorials by Paulo Nunes | January 24, 2013

This article demonstrates how to use the less.js framework and jQuery, to define CSS themes in a static webpage and dynamically applying them on the browser side.

In previous articles, I wrote about dynamically reloading CSS stylesheets in a webpage using Javascript and jQuery.
However, I was never satisfied with some of the limitations of CSS, for instance in terms of lack of variables. For example, if one uses the same colour many times in the same stylesheet, one has to copy that colour over and over. The less.js framework provides a dynamic language. LESS extends CSS with dynamic behaviour such as variables, mixins, operations and functions. In this example I will show the use of variables and dynamic loading of files to apply themes to a website.

I didn’t bother looking for a CSS theme framework. I just explored the possibilities for having a neat CSS design and being able to dynamically reloading it using jQuery.

In the markup, we define a button bar that will allow us to switch themes.

<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  	<title>Dynamic CSS with LessCSS</title>
  	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

  	<link rel="stylesheet/less" type="text/css" href="css/base.less"/>  	
  	<link id="theme" rel="stylesheet/less" type="text/css" href="css/purple.less"/>  	
	<script type="text/javascript" src="js/less-1.3.1.js"></script>
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>	
	<script type="text/javascript" src="js/script.js"></script> 
</head>
<body>
    <div id="content" style="display: none;">
        <h1>Dynamic CSS with less.js</h1>
        <ul id="nav">
            <li><a id="purple" class="theme" href="#purple">Purple</a></li>
            <li><a id="red" class="theme" href="#red">Red</a></li>
            <li><a id="gray" class="theme" href="#gray">Gray</a></li>            
        </ul>       
    </div>     
</body>
</html>

<!doctype html>

<html>

<head>

<title>Dynamic CSS with LessCSS</title>

</head>

<body>

<h1>Dynamic CSS with less.js</h1>

<li><a id="purple" class="theme" href="#purple">Purple</a></li>

</ul>

</div>

</body>

</html>

Now, the stylesheet files for the less.js framework. We define a base.less theme, and separate files for the themes: gray.less, red.less and purple.less. The default theme is purple, as you can see in the markup above.

The base file defines the stylesheet for the markup. Variables are defined for colours and fonts. In the theme files, these variables are overridden.

/* default colours */
@background-color: white;
@nav-over-color: blue;
@nav-text-color: gray;
@nav-background-color: black;
@link: blue;
@font: "Verdana";

#content {
	background-color: @background-color;
	font-family: @font;
	width: 50%;
	padding: 10px;
	margin-left: auto;
    margin-right: auto;
    padding: 25px;
}

ul#nav {	
	list-style: none;
	width: 100%;	
}

ul#nav:after {
	content: "�020";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#content ul#nav li {
	float: left;
	width: 20%;
	text-align: center;
}

#content ul#nav a {
	display: block;
	background: @nav-background-color;
	color: @nav-text-color;
	font-weight: bold;
	padding: 10px;	
}

#content ul#nav a:hover {
	background: @nav-over-color;
}

a,a:visited {	
	text-decoration: none;	
}

p {
	margin-bottom: 20px;
}

/* default colours */

@background-color: white;

@nav-over-color: blue;

@nav-text-color: gray;

@nav-background-color: black;

@link: blue;

@font: "Verdana";

#content {

background-color: @background-color;

font-family: @font;

width: 50%;

padding: 10px;

margin-left: auto;

margin-right: auto;

padding: 25px;

}

ul#nav {

list-style: none;

width: 100%;

}

ul#nav:after {

content: "�020";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

#content ul#nav li {

float: left;

width: 20%;

text-align: center;

}

#content ul#nav a {

display: block;

background: @nav-background-color;

color: @nav-text-color;

font-weight: bold;

padding: 10px;

}

#content ul#nav a:hover {

background: @nav-over-color;

}

a,a:visited {

text-decoration: none;

}

p {

margin-bottom: 20px;

}

This is an example theme file that overrides the base variables

@import "base.less";

/* gray colors*/
@background-color: #F0F0F0;
@nav-over-color: #949494;
@nav-text-color: #FFFFFF;
@nav-background-color: #4F4F4F;
@link: #A000CC;
@font: "Arial";

@import "base.less";

/* gray colors*/

@background-color: #F0F0F0;

@nav-over-color: #949494;

@nav-text-color: #FFFFFF;

@nav-background-color: #4F4F4F;

@link: #A000CC;

@font: "Arial";

The remaining part is the Javascript. Using jQuery, the less script is replaced when a click happens on one of the links on button bar. We remove the CSS file generated by Less and call refresh() to rerun the less.js compiler.

$(document).ready(function() {

function showContent() {
  $("#content").fadeIn("slow");
}

function hideContent() {
  $("#content").hide();
}

$('.theme').click(function() {		
  // replace the css file
  var value = $(this).attr("id");	
  var file = "css/"+value+".less";		
  $("#theme").attr("href", file);

  // remove the old less stuff
  $('style[id^="less:"]').remove();	

  // hide the div, refresh the CSS and show it again
  hideContent();
  less.refresh();	
  showContent();
  return false;
});	

showContent();

});