Question

Using jquerymobile theming, I want the navbars in the header to use a different swatch than the header. According to the examples at the bottom of http://jquerymobile.com/demos/1.1.1/docs/toolbars/docs-navbar.html, it seems that all I need to do is apply the themes to the individual links that serve as navbar items. If you view source on the examples, they look similar to what I have in my code.

Currently, swatch A is applied to the header (where the logo image is), but the navbar is just a standard grey.

  <section data-role="page" data-theme="a">
      <header data-role="header">
        <img src="images/mcn-logo-rev.png" id="logo" />
        <img src="images/question-mark-in-circle.png" id="help" class="ui-btn-right" />

        <div data-role="navbar">
          <ul>
            <li><a href="#" data-icon="mcn-messages" data-theme="b">Messages</a></li>
            <li><a href="#" data-icon="mcn-groups" data-theme="b">Groups</a></li>
            <li><a href="#" data-icon="mcn-settings" data-theme="b">Settings</a></li>
          </ul>
        </div>

        <div data-role="navbar">
          <ul>
            <li><a href="#" data-theme="b">All</a></li>
            <li><a href="#" data-theme="b">Unread</a></li>
            <li><a href="#" data-theme="b">Search</a></li>
          </ul>
        </div>
...

Answer 1

Actually the original markup was ok. I was misunderstanding jQueryMobile. I thought the navbar would pick up the toolbar color, instead it picks up the button color of the swatch you apply. Fixing the theme applied the right color without changing the markup.