How to create multiple themes in Web Application (JSP)

There are plenty of solutions for creating themes using javascript and css, but sometimes we are not sure how to implement that logic in a web application. Here I am sharing the steps that I used to implement different themes in my web application that uses struts2.0, tiles.
Mostly themes are cookies based, so the user must have cookies enabled in her browser. Usually we dont prefer to retain user's preference in the database.
Step 1.
Put hyperlinks for each theme in the page, so that user can select her theme. we are calling a javascript function and passing the theme name.

 Change your theme: 

  <a href="javascript:setTheme('Classic')">Classic</a> | <a href="javascript:setTheme('Standard')">Standard</a> | <a href="javascript:setTheme('Basic')">Basic</a> 

Step 2.
Write a javascript function setTheme(), This function will set the selected theme in the cookies, we are using one more javascript function setCookie() which is being called from setTheme(). 
After setting the theme to the cookies, we have to reload the page to let the selected theme show its colors :-)

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function setTheme(themeName){
        setCookie("myTheme",themeName,365);
        window.location.reload();
}

Step 3.
At this point we have set the selected theme in user's browser, now its the time to read the selected theme from cookies (from request object in jsp). based on theme we have to render the css style in the document.
Remember if the user has disabled cookies then you application may fail to load the css, hence we have to load default css at the beginning(first line in below code).
I am using struts2, so using ognl expression for context path, you can use according to your tech. Idea is to put the correct path of the css.

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/default.css" />
<%
String cookieName = "myTheme";
Cookie cookies [] = request.getCookies ();
Cookie myCookie = null;

if (cookies != null){
        for (int i = 0; i < cookies.length; i++){
                if (cookies [i].getName().equals (cookieName)){
                        myCookie = cookies[i];
                        break;
                }
        }
}
if(myCookie!=null){%>

 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/<%=myCookie.getValue()%>.css" />
<%
}
%>

Step4.
Above code will put default.css and user selected theme css (Basic.css or Standard.css or Classic.css) in html document.

Here is the trick for the css, prepare a default css, then create a separate css for each theme, put only the changed styles props in theme css. 
in code below I have put all required styles props in default.css and in Basic.css i have put only one style property ie. background-color: Blue; 
because when user select Basic theme we are only changing the back-ground color to blue, other properties remains the same.(put whatever properties you what to change)

moreover we are putting default.css in each page irrespective of theme selection. so we always have all the properties of the Body tag.

-----------------
default.css-----------------
body {
        border: 0 none #FFFFFF; 
        font-size: 11px;
        color: #222;
        font-family: arial,tahoma,verdana,sans-serif;
        line-height: 1.5em;
        background-color: Yellow;
        text-align: left;
        word-wrap: break-word;
}
-----------------
Basic.css-----------------
body {  
        background-color: Blue; }

-----------------
Standard.css-----------------
body {  
        background-color: Green;        }
-----------------
Classic.css-----------------
body {  
        background-color: Red;  }

Step 5.
Deploy your application and run. 
select the required theme and background color should change accordingly.