Theme changer

EuroBytes theme changer

by Imri Paloja

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="http://www.eurobytes.nl/css/class.css">
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>Tis is a paragraph.</p>
<p>This is a paragraph.</p>

<div id="themechanger">
    <b>Background color:</b>
    <ul>
        <li>Dark:<button id="dark"></button></li>
            <li>Blue: <button id="blue"></button></li>
    </ul>
    <b>Paragraph size</b>
        <ul>
        <li><button id="12px" name="12px" value="12px">12px</button></li>
            <li><button id="15px">15px</button></li>
    </ul>

    <b>Paragraph color</b>
        <ul>
        <li><button id="white">white</button></li>
            <li><button id="black">black</button></li>
    </ul>
</div>

CSS

#themechanger {
    background-color: #F9F9F9;
    border: 1px solid #1B1B1B;
    padding: 2px 5px;
    width:250px;
    min-height:175px;
    position: absolute;
    right:0;
    top:0;
    margin-top:50px;
}

#themechanger button {
    color:#454545;
    border:1px solid #FFFFFF;
    width:50px;
    height:25px;
    text-align: center;
    cursor: pointer;
}

ul {
    list-style-type:none;
    margin:0px;
    padding:2px 5px;
}

li {
    height: 35px;
    line-height: normal;
}

html body #themechanger ul li button#blue {
    background: #3F4C6B;
    background-image: #3F4C6B;
    background-color:#3F4C6B;
    border: 1px solid #3F4C6B;
}

html body #themechanger ul li button#dark {
    background: #454545;
    background-image: #454545;
    background-color:#454545;
    border: 1px solid #454545;
}

html body #themechanger ul li button#12px {
    background: none;
    background-image: none;
    background-color: none;
    border: 1px solid #454545;
    color: #454545;
}

html body #themechanger ul li button#15px {
    background: transparent;
    background-image: transparent;
    background-color:transparent;
    border: 1px solid #454545;
}

JavaScript

$(document).ready(function(){
  $("button#dark").click(function(){
    $("body,html").css("background-color","#454545");
  });
});

$(document).ready(function(){
  $("button#blue").click(function(){
    $("body,html").css("background-color","#3F4C6B");
  });
});

$(document).ready(function(){
  $("button#12px").click(function(){
    $("p").css("font-size","12px");
  });
});
$(document).ready(function(){
  $("button#15px").click(function(){
    $("p").css("font-size","15px");
  });
});

$(document).ready(function(){
  $("button#white").click(function(){
    $("p").css("color","#FFFFFF");
  });
});
$(document).ready(function(){
  $("button#black").click(function(){
    $("p").css("color","#000000");
  });
});