Theme chooser

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<ul id="themeChooser"><li></li></ul>
<p class="choose-theme">Choose Theme:</p>
<br/><br/>
<div id="grid"></div>

<p>Note: in order for the whole page to be styled, the &lt;body&gt; element has a <code>k-content</code> class.</p>

CSS

html,body {
    margin: 0;
    padding: 0;    
}

body {
    font: 12px/1.5 Tahoma,sans-serif;
    padding: 2em;
}

#tree {
    height: 9em;
}

/* Theme Chooser */
.choose-theme
{
    color:#939393;
    float:right;
    margin:0 10px 0 0;
    line-height:28px;
}

#themeChooser
{
    float: right;
    background:rgba(0,0,0,.1);
    border:solid rgba(0,0,0,.2);
    border-width:0 1px;

    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    overflow:hidden;
}


#themeChooser li
{
    display:inline;
}

#themeChooser,
#themeChooser span
{
    display:inline-block;
    vertical-align:middle;
}

#themeChooser span
{
    padding:0 9px;
    line-height:27px;
    cursor:pointer;

    -moz-box-shadow:inset 0 3px 1px -2px rgba(204, 204, 204, .5);
    -webkit-box-shadow:inset 0 3px 1px -2px rgba(204, 204, 204, .5);
    box-shadow:inset 0 3px 1px -2px rgba(204, 204, 204, .5);
}

#themeChooser li:first-child span
{
    -moz-border-radius:5px 0 0 5px;
    -webkit-border-radius:5px 0 0 5px;
    border-radius:5px 0 0 5px;
}

#themeChooser li:last-child span
{
    -moz-border-radius:0 5px 5px 0;
    -webkit-border-radius:0 5px 5px 0;
    border-radius:0 5px 5px 0;
}

#themeChooser .k-state-selected
{
    cursor:default;
    position:relative;
    background:repeat-x 0 -258px url(http://demos.kendoui.com/content/shared/styles/highlight.png)
}

#themeChooser .k-state-selected:after
{
    content:" ";
    display:block;
    border-color: #fff transparent transparent;
    border-style: solid;
    border-width: 5px 5px 0;
    left: 50%;
    margin: 0 0 0 -5px;
    position: absolute;
    top: 0;
    width: 0;
    height:0;
}

#themeChooser .skin-black .k-state-selected{background-color:#0070e4;color:#fff;}
#themeChooser .skin-blueopal .k-state-selected{background-color:#005c83;color:#fff;}
#themeChooser .skin-default .k-state-selected{background-color:#f0713a;color:#fff;}
#themeChooser .skin-metro...

JavaScript

// Theme Chooser object
$.fn.themeChooser = function(options) {
    options = $.extend({ largeIcons: true }, options);

    var themes = [
            { text: "Black", value: "black" },
            { text: "Blue Opal", value: "blueopal" },
            { text: "Default", value: "default" },
            { text: "Metro", value: "metro" },
            { text: "Silver", value: "silver" }
        ],
        template = kendo.template("<li data-value='#=value#' class='skin-#=value#'><span>#= text #</span></li>"),
        setTheme = function(theme) {
            changeTheme(theme, true);

            try {
                sessionStorage.setItem("kendoSkin", theme);
            } catch(err) {}
        };

    return this.each(function() {
        var theme;

        try {
            theme = sessionStorage.getItem("kendoSkin");
        } catch(err) {}

        theme = theme || "default";

        $(this).html(kendo.render(template, themes))
               .on("click", "li", function() {
                   var li = $(this).children("span").addClass("k-state-selected").end(),
                       theme = themes[li.index()];

                   li.siblings().children("span").removeClass("k-state-selected");

                   setTheme(theme.value);
               })
               .children()
               .filter(function() {
                   return $(this).data("value") === theme;
               }).children("span").addClass("k-state-selected");
    });
};

$("#themeChooser").themeChooser();

// loads new stylesheet
function changeTheme(skinName, animate) {
    var doc = document,
        kendoLinks = $("link[href*='kendo.']", doc.getElementsByTagName("head")[0]),
        commonLink = kendoLinks.filter("[href*='kendo.common']"),
        skinLink = kendoLinks.filter(":not([href*='kendo.common'])"),
        href = location.href,
        skinRegex = /kendo\.\w+(\.min)?\.css/i,
        extension = skinLink.attr("rel") === "stylesheet" ? ".css" : ".less",
        url =...