Doppia skin sul forum, scambiale con un click!

<!-- CARICAMENTO SKIN INIZIALE -->
<script type="text/javascript">
function def() {
document.body.className = "bodydef";
}
function alt() {
document.body.className = "bodyalt";
}
if (localStorage.getItem('skin') === null) {
localStorage.setItem('skin','def');
}
else if (localStorage.getItem('skin') === 'def') {
null
}
else if(localStorage.getItem("skin") == "alt") {
alt();
}
</script>
<!-- FINE CARICAMENTO -->

<!-- LABEL CHE CAMBIANO SKIN --><div id="change">
<div style="background:#FFF"><h2 href="http://procva.forumcommunity.net/" style="color:#800" onmouseover="this.style.cursor='pointer';" onclick="def(); localStorage.setItem('skin','def')">Skin Bianca</h2></div>
<div style="background:#800"><h2 style="color:#FFF" href="http://procva.forumcommunity.net/" onmouseover="this.style.cursor='pointer';" onclick="alt();localStorage.setItem('skin','alt')">Skin Rossa</h2></div></div>

.bodyalt {background:url(LINK SECONDA IMMAGINE DI SFONDO); -webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear}
.bodydef {background:url(LINK PRIMA IMMAGINE DI SFONDO); -webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear}

/*PARTE IMPORTANTE: PRESTARE ATTENZIONE */
#change {position: fixed;
top: 30px;
right: 0%;
margin-right: 10px}

#change div {float: left;
padding: 5px;
line-height: 90%;
border-radius: 0 0 5px 5px;
box-shadow: 1px 2px 0 rgb(0, 0, 0);
font-weight: bold;
-moz-transition: all 0.5s ease-in-out 0s}

#change div:hover {line-height: 150%}