Day/Night mode - CSS + JQuery - Cookies?

Question 1

Last edit: now disabling selected button on page load, CODE NOT IN THIS POST, see the latest JSFiddle

Explanation

What I did:

The code is put in between<script> tags at the end of the <body> (personnal preference)
I added the parameter event to the onClick event of the button element.
I added event.preventDefault() at the start of the onclick event of the button element: ensuring the page is NOT refreshed on the click of a button.

Warning: ALL the buttons will behave the same in your page. If you have other buttons, I suggest you add another class for those three buttons and bind the event on the button.myClass element.

I added a condition on the button state change, so the reset button won't get disabled.
eval($(this).val().toLowerCase()+"();"); gets the value of the the clicked button and executes the function attached to it.

Solution

HTML

<body id="body">
    <input type="button" class="changeBg" onclick="day();" value="Day" />
    <input type="button" class="changeBg" onclick="night();" value="Night" />
    <input type="button" class="changeBg" onclick="reset();" value="Reset" />
</body>

JavaScript

(JSFiddle) <-- Check this out Updated with classes & cookies

function day() {
    body.className = "lightSwitch";
};

function night() {
    body.className = "darkSwitch";
};

function reset() {
    body.className = "";
};

$(function () {
    /* RegEx to grab the "bgColor" cookie */
    var bgColor = document.cookie.replace(/(?:(?:^|.*;\s*)bgColor\s*\=\s*([^;]*).*$)|^.*$/, "$1");
    
    var button = $('input[type=button].changeBg');
    button.on('click', function (event) {
        event.preventDefault();
        
        /* Executing the function associated with the button */
        eval($(this).val().toLowerCase() + "();");

        button.not($(this)).removeAttr('disabled');
        if ($(this).val() != "Reset") {
            $(this).attr('disabled', '');
            
            /* Here we create the cookie and set its value, does not happen if it's Reset which is fired. */
            document.cookie = "bgColor="+$(this).val();
        }
    });
    
    /* If the cookie is not empty on page load, execute the function of the same name */
    if(bgColor.length > 0)
    {     
        eval(bgColor.toLowerCase()+'()');
         
        /* Disable the button associated with the function name */
        $('button[value="'+bgColor+'"]').attr("disabled","disabled");
    }
});

Question 2

I recommend you don't use cookies unless localStorage is not supported. They slow your site down.

if(localStorage){

   localStorage.setItem("bgColor", "lightSwitch");

}else{

   document.cookie = "bgColor=lightSwitch";

}