Jquery mobile: Change theme on click

Question

I have got a basic list with the theme a. I am trying to find a way to change the theme when clicking on a button. Have tried $('a li').attr('data-theme','a'); combined with list refresh with no luck. An success out there?

Answer 1

You would have to search the page for all ui-body-, ui-button-up, ui-button-down, ui-button-hover, and ui-bar- classes, find the letter at the end of each of those, remove those classes then add them back with the desired theme letter at the end of each class. I am working on a plugin to do just that at the moment.

The below would change a page set to theme D's bars to theme B:

var pages = $("div[data-role='page']"), pageThemeClasses = $(pages+"[class$=d]");

$(pageThemeClasses).removeClass('ui-bar-b');
$(pageThemeClasses).addClass('ui-bar-b');

Answer 2

Not sure why this works but changing the classes then the theme, then triggering 'create' works for me - hope it helps someone.

$("div[data-role='collapsible']").bind('expand', function() {
 $(this).find("a[data-theme='c']").removeClass('ui-btn-up-c').addClass('ui-btn-up-b').attr('data-theme', 'b').trigger('create');
});

$("div[data-role='collapsible']").bind('collapse', function() {
 $(this).find("a[data-theme='b']").removeClass('ui-btn-up-b').addClass('ui-btn-up-c').attr('data-theme', 'c').trigger('create');
});

Answer 3

Well, it depends on what kind of element you're trying to change. This is how you could toggle a button elements theme:

var oT = $(this).attr('data-theme'); // old theme
var nT = (oT == 'a' ? 'e' : 'a'); // new theme

$(this).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT);
$(this).parent('div').removeClass('ui-btn-hover-' + oT).addClass('ui-btn-hover-' + nT).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT);

Instead, if it's an anchor tag with data-role="button":

$(this).removeClass('ui-btn-hover-' + oT).addClass('ui-btn-hover-' + nT).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT);

Simply, use the browser consoles to inspect where the element (and parent/child elements) data-theme attributes and classes are defined.

Answer 4

This worked for me.

$("a li").removeClass("ui-body-b"); //remove old theme
$("a li").addClass("ui-body-a"); //add new theme

Answer 5

Well, the answer from Corey Docken basically works:

$("a li").attr("data-theme", "a").trigger("mouseout")

The trick is that jQuery mobile always changes the classes when you hover over a element according to the choosen data-theme. If you change the data-theme, the next hover/mouseover event will change the classes according to the new theme.

Well, it only works if the new theme has a higher letter than the old one. The classes from the old theme remain. As classes with a higher letter are placed after the ones with lower letter, the higher letter wins.

Answer 6

I noticed that if you change the "data-theme" attribute, jQuery Mobile would refresh your theme on the mouseover event. This solution is kind of a hack, but it's simple.

$("a li").attr("data-theme", "a").trigger("mouseout")

Sorry for resurrecting a dead question, but I found this question Google (#6 on the SERP for "jquery mobile change theme") and there was no correct answer.

Answer 7

If you were using theme roller (themeroller.jquerymobile.com) then you could adjust your own colors and export each theme on a css, then programmatically :

$("#idoflink").attr("href", "theotherstyle.css");

I think it should do

Answer 8

Put this code into head:

<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.5.min.css">
<script>
    $( document ).on( "pagecreate", function() {
        $( "#theme-selector input" ).on( "change", function( event ) {
            var themeClass = $( "#theme-selector input:checked" ).attr( "id" );

            $( "#testpage" ).removeClass( "ui-page-theme-a ui-page-theme-b" ).addClass( "ui-page-theme-" + themeClass );
        });
    });
</script>

$( "#testpage" ) is an id of the example component (this would be the id on the main div inside of body).

Add to the body:

<div class="ui-field-contain" id="theme-selector">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Theme:</legend>
                <label for="a">A</label>
                <input type="radio" name="theme" id="a" checked>
                <label for="b">B</label>
                <input type="radio" name="theme" id="b">    
            </fieldset>
        </div>

I hope this is the answer to what you are trying to achieve. Of course you can easily replace "radio" with "button" and restyle it a little bit.

Answer 9

In 2018 this works for me, just adjust your values for the different themes you downloaded from ThemeRoller.

Get the div who has a data-role="page"

var lastTheme = 'a';
function ThemeSwap() {
    var rootDiv = $('#IdOfDivMarkedAsDataRolePage');

    if (lastTheme === 'a') {
        rootDiv.removeClass('ui-page-theme-a');
        rootDiv.addClass('ui-page-theme-b');
        lastTheme = 'b';
    }
    else if (lastTheme === 'b') {
        rootDiv.removeClass('ui-page-theme-b');
        rootDiv.addClass('ui-page-theme-c');
        lastTheme = 'c';
    }
    else if (lastTheme === 'c') {
        rootDiv.removeClass('ui-page-theme-c');
        rootDiv.addClass('ui-page-theme-a');
        lastTheme = 'a';
    }
    else
        alert('bad theme swapping.  last theme = ' + lastTheme);

    rootDiv.trigger('create');
    return true;
}

The alert has not been thrown yet at the end of the ifelse block.

Answer 10

$('a li').data('theme', 'a'); 
                          //<-- use the data() function to change data attributes