HTML:
The Greasy Grandma
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('');
});
// 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('');
}
}