Q:

JQuery CSS ThemeRoller Mobile: Applying Theme A, B, C to different pages

I'm trying to design a mobile app based on Themeroller CSS generated theme. Additionally the package includes:

jQuery 1.9.1
jQuery 1.3.0
jquery.mobile.structure-1.3.0.min.css

Themeroller generated CSS file has three different themes (for three pages):

Theme A (Blue)
Theme B (Red)
Theme C (Gray)

I've created everything in HTML5 and applied all above mentioned sources, but the result is all pages are in Theme A instead of another themes B and C respectively. Here is the JSFIDDLE version of the project.
I can not find where I'm going wrong. Any ideas?
<!-- Page 1 -->
<div data-role="page" id="firstPage" data-theme="a">
    <div data-role="header" data-position="inline">
        <h1>Page 1</h1>
        <a href="#" data-role="button" data-theme="a">!</a>
        <a href="#secondPage" data-role="button" data-theme="a">p2</a></div>
    <div data-role="content" data-theme="a" align="center">
    <!-- Content -->
    <h1>Test1 Test1</h1>
    <p>Text1 Text1</p>
    <select name="sound" data-role="slider" data-theme="a">
        <option value="0">Off</option>
        <option value="1" selected="selected">On</option>
    </select></div>
    <!-- /Content -->
</div>
<!-- Page 2 -->
<div data-role="page" id="secondPage" data-theme="b">
    <div data-role="header" data-position="inline">
        <h1>Page 2</h1>
        <a href="#firstPage" data-role="button" data-theme="b">p1</a>
        <a href="#thirdPage" data-role="button" data-theme="b">p3</a></div>
<div data-role="content" data-theme="b" align="center">
    <!-- Content -->
    <h1>Test2 Test2</h1>
    <p>Text2 Text2</p>
    <select name="sound" data-role="slider" data-theme="b">
        <option value="0">Off</option>
        <option value="1" selected="selected">On</option>
    </select></div>
    <!-- /Content -->
</div>
<!-- Page 3 -->
<div data-role="page" id="thirdPage" data-theme="c">
    <div data-role="header" data-position="inline">
        <h1>Page 3</h1>
        <a href="#secondPage" data-role="button" data-theme="c">p2</a>
        <a href="#" data-role="button" data-theme="c">!</a></div>
<div data-role="content" data-theme="c" align="center">
    <!-- Content -->
    <h1>Test3 Test3</h1>
    <p>Text3 Text3</p>
    <select name="sound" data-role="slider" data-theme="c">
        <option value="0">Off</option>
        <option value="1" selected="selected">On</option>
    </select></div>
    <!-- /Content -->
</div>

A:

First this is a bug with jQuery Mobile but you can make it work if you remove data-theme from all of your data-role="page" div and move it to you data-role="header" div.
Working example: http://jsfiddle.net/Gajotres/ceBAj/
<!-- Page 1 -->
<div data-role="page" id="firstPage">
    <div data-role="header" data-position="inline">
        <h1>Page 1</h1>
        <a href="#" data-role="button" data-theme="a">!</a>
        <a href="#secondPage" data-role="button" data-theme="a">p2</a></div>
    <div data-role="content" data-theme="a" align="center">
        <!-- Content -->
        <h1>Test1 Test1</h1>
        <p>Text1 Text1</p>
        <select name="sound" data-role="slider" data-theme="a">
            <option value="0">Off</option>
            <option value="1" selected="selected">On</option>
        </select></div>
        <!-- /Content -->
</div>

<!-- Page 2 -->
<div data-role="page" id="secondPage">
    <div data-theme="b" data-role="header" data-position="inline">
        <h1>Page 2</h1>
        <a href="#firstPage" data-role="button" data-theme="b">p1</a>
        <a href="#thirdPage" data-role="button" data-theme="b">p3</a></div>
    <div data-role="content" data-theme="b" align="center">
        <!-- Content -->
        <h1>Test2 Test2</h1>
        <p>Text2 Text2</p>
        <select name="sound" data-role="slider" data-theme="b">
            <option value="0">Off</option>
            <option value="1" selected="selected">On</option>
        </select></div>
        <!-- /Content -->
</div>

<!-- Page 3 -->
<div data-role="page" id="thirdPage">
    <div data-theme="c" data-role="header" data-position="inline">
        <h1>Page 3</h1>
        <a href="#secondPage" data-role="button" data-theme="c">p2</a>
        <a href="#" data-role="button" data-theme="c">!</a></div>
    <div data-role="content" data-theme="c" align="center">
        <!-- Content -->
        <h1>Test3 Test3</h1>
        <p>Text3 Text3</p>
        <select name="sound" data-role="slider" data-theme="c">
            <option value="0">Off</option>
            <option value="1" selected="selected">On</option>
        </select></div>
        <!-- /Content -->
</div>

