HTML:
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>The Greasy Grandma</title>
<link href="css/theme1.css" rel="stylesheet" type="text/css" id="sheet1">
<script src="js\jquery.js"></script>
</head>
<body>
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="services.html">Products</a>
</li>
<li>
<a href="contacts.html">Contacts</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<div id="theme">
<input type="button" id="theme1" class="theme">
<input type="button" id="theme2" class="theme">
</div>
</li>
</ul>
</nav>
<script type="text/javascript" src="js\events.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</body>
</html>
CSS:
/* Theme 1 */
body {
background: #ff4455;
}
nav {
background-color: #99EBD8;
height: 50px;
border-radius: 2px;
}
nav ul {
height: 500px;
width: 950px;
margin: 0 auto;
}
nav ul li {
list-style-type: none;
width: 150px;
float: left;
border: none;
text-align: center;
}
li a {
text-decoration: none;
color: white;
line-height: 50px;
display: block;
}
li a:hover {
background: none repeat scroll 0 0 #4D0000;
color: #8F4700;
}
/* Theme 2 */
body {
background: #ee7744;
}
nav {
background-color: #99EBD8;
height: 50px;
border-radius: 2px;
}
nav ul {
height: 500px;
width: 950px;
margin: 0 auto;
}
nav ul li {
list-style-type: none;
width: 150px;
float: left;
border: none;
text-align: center;
}
li a {
text-decoration: none;
color: white;
line-height: 50px;
display: block;
}
li a:hover {
background: none repeat scroll 0 0 #4D0000;
color: #8F4700;
}
JQUERY:
$(document).ready(function(){
applyTheme();
});
$(".theme").click(function(e){
e.preventDefault();
//removes current stylesheet
$("#customSheet").remove();
//gets the theme name the user clicked
var themeName = $(this)[0].id;
//sets it to storage
setTheme(themeName);
//appends to the head so it loads
$('head').append('<link href="css/"'+themeName +' rel="stylesheet" id="customSheet" />');
});
// sets local storage, pretty self explanatory, localstorage is an object that persists across the browser state until the user clears it out, usually because of some other plugin or just clears the cache
function setTheme(theme) {
localStorage.setItem('themeClass', theme);
}
//how to apply the theme to the document's body so that it can conditionally load
function applyTheme() {
var theme = localStorage.getItem('themeClass');
if(theme) {
$('head').append('<link rel="stylesheet" type="text/css" href="css/"'+theme+'".css>');
}
}