Style Sheet Switcher with Cookie make jQuery less repetitive

Question

I bite at jQuery but I know what I need and this works but it's super repetitive and will become quite annoying when there's more than a couple cookies and style sheets to manage.

Question: how to make this less repetitive so that many styles can be used:

// USING: https://github.com/carhartl/jquery-cookie

$(document).ready(function () {

    $("#red").click(function () {

        $.cookie("red", 1);
        $.removeCookie("blue");

        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", "assets/css/red.css");
        document.getElementsByTagName("head")[0].appendChild(fileref);

        $('.logo-svg').attr('src', 'assets/images/logo-red/logo.svg');

        return false;

    });

    $("#blue").click(function () {
        $.removeCookie("red");
        $.cookie("blue", 1);

        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", "assets/css/blue.css");
        document.getElementsByTagName("head")[0].appendChild(fileref);

        $('.logo-svg').attr('src', 'assets/images/logo-blue/logo.svg');
        return false;

    });

});


$(window).load(function () {

    if ($.cookie('red')) {
        $('.logo-svg').attr('src', 'assets/images/logo-red/logo.svg');
        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", "assets/css/red.css");
        document.getElementsByTagName("head")[0].appendChild(fileref);
    }

    if ($.cookie('blue')) {
        $('.logo-svg').attr('src', 'assets/images/logo-blue/logo.svg');
        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", "assets/css/blue.css");
        document.getElementsByTagName("head")[0].appendChild(fileref);
    }

});

HTML

<ul class="styleswitch">
     <li><a id="red" href="#">Red</a></li>
     <li><a id="blue" href="#">Blue</a></li>
</ul>

Answer 1

Use the id as the color

$(".styleswitch a").click(function () {
    var color = this.id;
    $.removeCookie("blue");
    $.removeCookie("red");
    $.cookie(color, 1);


    var fileref = document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", "assets/css/"+color+".css");
    document.getElementsByTagName("head")[0].appendChild(fileref);

    $('.logo-svg').attr('src', 'assets/images/logo-'+color+'/logo.svg');

    return false;

});

for the window.load() create a function(color)

function getStyle(cookieColor){
        $('.logo-svg').attr('src', 'assets/images/logo-'+cookieColor+'/logo.svg');
        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", "assets/css/"+cookieColor+".css");
        document.getElementsByTagName("head")[0].appendChild(fileref)
}

$(window).load(function () {
    if ($.cookie('red')) {
        getStyle("red")
    } else if ($.cookie('blue')) {
        getStyle("blue")
    }
});