How to programmatically change a theme?

[Ian]

I'm struggling to find any information on how to change/set one of the Kendo UI themes programatically.  I've seen some information on ThemeBuilder but I really want my own drop-down menu to trigger a theme change.

If I have a menu item as follows, what do I need to put in the "onSelected" event to actually change the theme to that which has been selected?

        $("#menuImages").kendoMenu({
            dataSource: [
                {
                    text: "",
                    imageUrl: "../../Content/images/languageMasterIcon.png",
                    items: [
                        { text: "English (en-GB)" },
                        { text: "English (en-US)" },
                        { text: "German (de-DE)" }
                    ]
                },
                {
                    text: "",
                    imageUrl: "../../Content/images/themeMasterIcon.png",
                    items: [
                        { text: "Default" },
                        { text: "Blue Opal" },
                        { text: "Bootstrap" },
                        { text: "Silver" },
                        { text: "Uniform" },
                        { text: "Metro" },
                        { text: "Black" },
                        { text: "Metro Black" },
                        { text: "High Contrast" },
                        { text: "Moonlight" }
                    ]
                },
...  omitted for brevity ...
            select: onSelect
});
function onSelect(e) {
            // NEED TO KNOW WHAT GOES HERE TO CHANGE THE THEME TO THAT SELECTED       
}

[Iliana Dyankova]

Hi Ian,

One of my colleagues created an example which demonstrates how to change the theme of Kendo UI widgets using a DropDownList (link to public post). For your scenario you can use the same approach, therefore I recommend you checking such thread and examining the source code.

Regards,
Iliana Nikolova
the Telerik team

[Joe]

Iliana,

Thanks for your response.  I am having the same issue as Ian.  The example you posted earlier, while functional, isn't very useful.  Sure, it changes the theme, but once the page is changed, the selected theme is lost.  How would I keep the theme persistent the entire time the user is accessing the application?

Thanks

[Iliana Dyankova]

Hi Jonathan,

The selection is lost if the page is changed, because all JavaScript variables are reset when the browser page is refreshed (this is default browser behavior and affects any JavaScript application). As a solution you can use any of the following:

• Cookies 
• Web storage (local or session)

Please have in mind that web storage is not supported by the older browsers.

Regards,
Iliana Nikolova
the Telerik team

[alessandro]

Hi, i did it with javascript, storing on browser, as below:

My html file

<link href="/assets/Content/KendoUi/kendo.common.min.css" rel="stylesheet"/>
<link href="/assets/Content/KendoUi/kendo.bootstrap.min.css" rel="stylesheet"/>

<select style="width: 120px;" id="ddlTema">
                        <option value="kendo.bootstrap.min">Bootstrap</option>
                        <option value="kendo.black.min">Black</option>
                        <option value="kendo.blueopal.min">BlackOpal</option>
                        <option value="kendo.fiori.min">Fiori</option>
                        <option value="kendo.flat.min">Flat</option>
                        <option value="kendo.highcontrast.min">High Constrast</option>
                        <option value="kendo.material.min">Material Light</option>
                        <option value="kendo.materialblack.min">Material Black</option>
                        <option value="kendo.metro.min">Metro Light</option>
                        <option value="kendo.metroblack.min">Metro Black</option>
                        <option value="kendo.moonlight.min">Moonlight</option>
                        <option value="kendo.office365.min">Office</option>
                    </select>

<script src="/assets/Scripts/jquery-2.1.3.js"></script>
<script src="/assets/Scripts/KendoUi/kendo.all.min.js"></script>
<script src="/assets/Scripts/custom.js"></script>

After that, i have my js code on 'custom.js' file, as below:

 

var theme = {

    changeTheme : function () {
        var selected = this.value;
        localStorage.setItem("theme-kendo", selected);
        window.location.reload();
    },

    loadTheme : function() {
        var theme = localStorage.getItem("theme-kendo");
        var css = $('link[href^="/assets/Content/KendoUi/"]')[1];  //get my css anchor
        css.href = '/assets/Content/KendoUi/' + theme + '.css';
    }
};


$(function () {
    theme.loadTheme();
    $('#ddlTema').on('change', theme.changeTheme);
});