「jquery-1.11.3.min.js」と「jquery.cookie.js」を使用しています。

サンプル

##js

qiita.js

$(function() {

    var key = "font";

    var data = localStorage.getItem(key);

    if (data == "large") {

        $("body").css("font-size", "120%");

        $("#font-size li.large").addClass("current");

    } else if (data == "middle") {

        $("body").css("font-size", "100%");

        $("#font-size li.middle").addClass("current");

    } else if (data == "small") {

        $("body").css("font-size", "80%");

        $("#font-size li.small").addClass("current");

    }

    $("#font-size li").click(function() {

        $("#font-size li").removeClass("current");

        var fontSize = $(this).attr("class");

        if (fontSize == "large") {

            data = "large";

            localStorage.setItem(key, data);

            $("body").css("font-size", "120%");

            $("#font-size li.large").addClass("current");

        } else if (fontSize == "middle") {

            data = "middle";

            localStorage.setItem(key, data);

            $("body").css("font-size", "100%");

            $("#font-size li.middle").addClass("current");

        } else {

            data = "small";

            localStorage.setItem(key, data);

            $("body").css("font-size", "80%");

            $("#font-size li.small").addClass("current");

        }

    });

    $("#color li").click(function() {

        $("body").toggleClass("color");
        $("#color li").toggleClass("current");

        if ($.cookie("color_display")) {

            $.cookie("color_display", '', {


                expires: -1

            });

        } else {

            $.cookie("color_display", '1', {

                expires: 7

            });

        }

    });

    if ($.cookie("color_display")) {

        $("body").toggleClass("color");
        $("#color li").toggleClass("current");

    } else {


    }

});

##html

qiita.html

<ul id="font-size">
    <li class="large"><a href="javascript:void(0);"><span>大</span></a></li>
    <li class="middle"><a href="javascript:void(0);"><span>中</span></a></li>
    <li class="small"><a href="javascript:void(0);"><span>小</span></a></li>
</ul>

<ul id="color">
    <li><a href="javascript:void(0);"><span>いろ</span></a></li>
</ul>

<p>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>

##css

qiita.css

ul,li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

h1 {
    font-size: 160%;
}

p {
    font-size: 100%;
}

#font-size li,
#color li {
    position: relative;
    z-index: 3;
    margin-bottom: 10px;
}

#font-size li a,
#color li a {
    display: block;
}

#font-size li,
#font-size li a,
#color li,
#color li a {
    width: 50px;
    height: 33px;
}

#font-size li span,
#color li span {
    position: relative;
    z-index: -1;
}

#font-size li.large a {
    background: url("./btn_large.png") no-repeat;
}

#font-size li.large a:hover,
#font-size li.large.current a {
    background: url("./btn_large.png") no-repeat -50px 0;
}

#font-size li.middle a {
    background: url("./btn_middle.png") no-repeat;
}

#font-size li.middle a:hover,
#font-size li.middle.current a {
    background: url("./btn_middle.png") no-repeat -50px 0;
}

#font-size li.small a {
    background: url("./btn_small.png") no-repeat;
}

#font-size li.small a:hover,
#font-size li.small.current a {
    background: url("./btn_small.png") no-repeat -50px 0;
}

#color li a {
    background: url("./btn_color.png") no-repeat;
}

#color li a:hover,
#color li.current a {
    background: url("./btn_color.png") no-repeat -50px 0;
}

body.color {
    background: #000;
    background-color: #000;
}

body.color h1,
body.color p {
    color: #FFF !important;
}