How to switch between two CSS files on a page

The basic idea for changing applied CSS is to tells the browser which one is to be used. For the purpose we have to do 3 things : 1. Use 2 CSS files in our page as given below (with title tag, we will later recognize these files through title):

2. Change the applied CSS file so theme can be changed. we can set two buttons somewhere on page so we can switch theme when we click on any of them.

Light
Dark

2. Tells browser to memorize , what is our current CSS , so it would render the right one for the user. For this we are using javascript and doing 3 things here :
to set Cookie and a function to switch the current CSS applied to other one, and a method to read cookie to get current CSS applied during page loads

function setActiveStyleSheet(title) {
    var i, a, main;
    for (i = 0;
    (a = document.getElementsByTagName("link")[i]); i++) {
        if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
            a.disabled = true;
            if (a.getAttribute("title") == title) a.disabled = false;
        }
    }
}
function getActiveStyleSheet() {
    var i, a;
    for (i = 0;
    (a = document.getElementsByTagName("link")[i]); i++) {
        if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
    }
    return null;
}
function getPreferredStyleSheet() {
    var i, a;
    for (i = 0;
    (a = document.getElementsByTagName("link")[i]); i++) {
        if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title")) return a.getAttribute("title");
    }
    return null;
}
function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}
window.onload = function (e) {
    var cookie = readCookie("style");
    var title = cookie ? cookie : getPreferredStyleSheet();
    setActiveStyleSheet(title);
}
window.onunload = function (e) {
    var title = getActiveStyleSheet();
    createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

Download Demo