How to change theme dynamically in jquery mobile?

Asked 28/12, 2011 at 13:54 Answered 18/9, 2015 at 12:47

Solved jquery html jquery-mobile themeroller

I am creating a mobile web applications using jQuery Mobile.

I am using theme-b for every page and I would like to change to another theme dynamically for every page. How can I change the theme dynamically?

Blubberhead answered 28/12, 2011 at 13:54 Comment(0)

You can target specific classes that relate to specific widgets, reset their classes, and then add the themed class of your choosing:

    //set your new theme letter
    var theme = 'e';

    //reset all the buttons widgets
    $.mobile.activePage.find('.ui-btn')
                       .removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e')
                       .addClass('ui-btn-up-' + theme)
                       .attr('data-theme', theme);

    //reset the header/footer widgets
    $.mobile.activePage.find('.ui-header, .ui-footer')
                       .removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e')
                       .addClass('ui-bar-' + theme)
                       .attr('data-theme', theme);

    //reset the page widget
    $.mobile.activePage.removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e')
                       .addClass('ui-body-' + theme)
                       .attr('data-theme', theme);

http://jsfiddle.net/VNXb2/1/

This is by no means a fully functional code snippet, you will need to find any other widgets that you want updated when you switch the theme and add them to the code above. You can find what classes each widget has easily by using FireBug or another Developer Console.

UPDATE

When you take into account the data-role="list-divider elements this gets a little tricky:

var theme = 'c';

//the only difference between this block of code and the same code above is that it doesn't target list-dividers by calling: `.not('.ui-li-divider')`
$.mobile.activePage.find('.ui-btn').not('.ui-li-divider')
                   .removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e')
                   .addClass('ui-btn-up-' + theme)
                   .attr('data-theme', theme);

//target the list divider elements, then iterate through them to check if they have a theme set, if a theme is set then do nothing, otherwise change its theme to `b` (this is the jQuery Mobile default for list-dividers)
$.mobile.activePage.find('.ui-li-divider').each(function (index, obj) {
    if ($(this).parent().attr('data-divider-theme') == 'undefined') {
        $(this).removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e')
               .addClass('ui-bar-b')
               .attr('data-theme', 'b');
    }
})

/*The rest of this code example is the same as the above example*/

Here is a demo: http://jsfiddle.net/VNXb2/7/

Sugarplum answered 28/12, 2011 at 19:37 Comment(7)

I m using list-divider in my application statically it is changing but dynamically it does not change that is only problem. – Blubberhead 5/1, 2012 at 17:7

@kanna I updated my answer, data-role="list-divider"s require a bit of logic to get them right but I think my answer is pretty complete: jsfiddle.net/VNXb2/7 – Sugarplum 5/1, 2012 at 22:14

@kanna Another thought, if you change the theme of a widget before it gets initialized then it will be correctly initialized in the theme of your choosing. If you bind to the pageInit event the widgets should not be initialized and you can change the theme of the page or any elements within the page. – Sugarplum 5/1, 2012 at 22:21

jsfiddle.net/wPQ85/3 please check this here i am using static and dynamic ul while static list divider theme is changing but in dynamic it is not changing – Blubberhead 6/1, 2012 at 4:48

@Sugarplum I've been using this code for awhile now because it works great, (so thanks!) but i've noticed it doesn't seem to change the ui-body on dialogs. I can't figure out why not. Any thoughts? – Banns 12/9, 2012 at 16:8

@CrimsonChin Dialogs are a bit different because of the semi-transparent background behind them. See this demo: jsfiddle.net/vpVDd/1. You just have to update the .ui-dialog element as well as the .ui-content element. – Sugarplum 12/9, 2012 at 16:36

@Sugarplum ok I see. Is there anyway I can use $.mobile.activePage to find the ui-dialog class? I cant get JQuery to find it. I trigger the themeswitcher on pagebeforeshow like so jsfiddle.net/ashanova/7qYhh/1 . Thanks for your time btw, your JQM answers are always really useful – Banns 13/9, 2012 at 8:29

The above answer helped me a lot, I modified it a little for my need, as I am using themeroller and expect to have more than 20 themes. Here is what I have done

function updateTheme(newTheme) {
//alert("In refresh");
var rmbtnClasses = '';
var rmhfClasses = '';
var rmbdClassess = '';
var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"  ];

$.each(arr,function(index, value){
    rmbtnClasses = rmbtnClasses + " ui-btn-up-"+value + " ui-btn-hover-"+value;
    rmhfClasses = rmhfClasses + " ui-bar-"+value;
    rmbdClassess = rmbdClassess + " ui-body-"+value;
});

// reset all the buttons widgets
 $.mobile.activePage.find('.ui-btn').not('.ui-li-divider').removeClass(rmbtnClasses).addClass('ui-btn-up-' + newTheme).attr('data-theme', newTheme);

 // reset the header/footer widgets
 $.mobile.activePage.find('.ui-header, .ui-footer').removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme', newTheme);

 // reset the page widget
 $.mobile.activePage.removeClass(rmbdClassess).addClass('ui-body-' + newTheme).attr('data-theme', newTheme);

 // target the list divider elements, then iterate through them and
 // change its theme (this is the jQuery Mobile default for
 // list-dividers)
 $.mobile.activePage.find('.ui-li-divider').each(function(index, obj) {
 $(this).removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme',newTheme);

 })

Now when I get the new Theme from the server via json I just call this method with the new theme as param.

Regards Rajesh J

Maxine answered 11/1, 2013 at 12:50 Comment(1)

How can I change theme for <input type="text"/> ? What class do I need to add here? – Human 5/1, 2014 at 6:35

Rajesh's answer helped me a lot... But Rajesh, you missed an important class ---- 'ui-page-theme-*', so I modified your answer and now it's perfect for jQuery Mobile 1.4.5 (again)...

var updateTheme = function(newTheme) {
    var rmbtnClasses = '';
    var rmhfClasses = '';
    var rmbdClassess = '';
    var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's']; // I had themes from a to s

    $.each(arr, function(index, value) {
        rmbtnClasses = rmbtnClasses + ' ui-btn-up-' + value + ' ui-btn-hover-' + value;
        rmhfClasses = rmhfClasses + ' ui-bar-' + value;
        rmbdClassess = rmbdClassess + ' ui-body-' + value + ' ui-page-theme-'+ value;
    });

    // reset all the buttons widgets
    $.mobile.activePage.find('.ui-btn').not('.ui-li-divider').removeClass(rmbtnClasses).addClass('ui-btn-up-' + newTheme).attr('data-theme', newTheme);

    // reset the header/footer widgets
    $.mobile.activePage.find('.ui-header, .ui-footer').removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme', newTheme);

    // reset the page widget
    $.mobile.activePage.removeClass(rmbdClassess).addClass('ui-body-' + newTheme + ' ui-page-theme-'+ newTheme).attr('data-theme', newTheme);

    // target the list divider elements, then iterate through them and
    // change its theme (this is the jQuery Mobile default for
    // list-dividers)
    $.mobile.activePage.find('.ui-li-divider').each(function(index, obj) {
        $(this).removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme', newTheme);
    });
};

Washcloth answered 18/9, 2015 at 12:47 Comment(0)

Recommended topics

Hot tags