This theme provides a Windows Phone user interface for Apache Cordova apps using jQuery Mobile on Windows Phone 8.
 
It is built for jQuery Mobile 1.4 (technically it should work for jQuery Mobile 1.4.X). Swatches are not included, theme acts as a single swatch. Theme also supports redesigned app-bar, date-picker, progress-bar, and toggle-button.
 

Link

 
Website
 
GitHub
 

Working example

 
Working Plunker example can be found here:
 
Plunker Demo
 
Embedded example:
 
 

Other reviewed themes

 
Click here if you need to go to the original review article.
 
 

Code

 
Code example in case plnkr.co is offline.
 

HTML

 
<!DOCTYPE html>
<html>

<head>
  <title>nativeDroid - Theme for jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/css/wp/jquery.mobile.wp.theme.css" />

  <link href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/css/progress-bar.css" rel="stylesheet" type="text/css" />
  <link href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/css/app-bar.css" rel="stylesheet" type="text/css" />
  <link href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/css/toggle-button.css" rel="stylesheet" type="text/css" />
  <link href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/css/mobiscroll-1.5.3.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    /* custom icons for toggle button*/
    .ui-icon-demo-help,
    .ui-icon-demo-set {
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: 30px 30px;
    }
    .ui-toggle-checked .ui-icon-demo-help {
      background-image: url(images/help.light.png);
    }
    .ui-toggle-unchecked .ui-icon-demo-help {
      background-image: url(images/help.dark.png);
    }
    .ui-toggle-checked .ui-icon-demo-set {
      background-image: url(images/set.light.png);
    }
    .ui-toggle-unchecked .ui-icon-demo-set {
      background-image: url(images/set.dark.png);
    }
    .ui-icon-demo-help,
    .ui-icon-demo-set {
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: 30px 30px;
    }
    .ui-btn-up-a .ui-icon-demo-help,
    .ui-btn-hover-a .ui-icon-demo-help,
    .ui-btn-down-b .ui-icon-demo-help {
      background-image: url(images/help.dark.png);
    }
    .ui-btn-up-b .ui-icon-demo-help,
    .ui-btn-hover-b .ui-icon-demo-help,
    .ui-btn-down-a .ui-icon-demo-help {
      background-image: url(images/help.light.png);
    }
    .ui-btn-up-a .ui-icon-demo-set,
    .ui-btn-hover-a .ui-icon-demo-set,
    .ui-btn-down-b .ui-icon-demo-set {
      background-image: url(images/set.dark.png);
    }
    .ui-btn-up-b .ui-icon-demo-set,
    .ui-btn-hover-b .ui-icon-demo-set,
    .ui-btn-down-a .ui-icon-demo-set {
      background-image: url(images/set.light.png);
    }
    @media screen and (orientation: portrait) {
      @-ms-viewport {
        width: 320px;
      }
    }
    @media screen and (orientation: landscape) {
      @-ms-viewport {
        width: 480px;
      }
    }
  </style>

  <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>-->

  <script src="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/js/jquery.js" type="text/javascript"></script>
  <script src="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/js/jquery.mobile.js" type="text/javascript"></script>
  <script src="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/css/wp/jquery.mobile.wp.theme.init.js" type="text/javascript"></script>
  <script src="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/js/jquery.mobile.themeswitcher.js" type="text/javascript"></script>
  <!--[if lte IE 9]>
    <script src="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/js/jquery.mobile.fixedToolbar.polyfill.js" type="text/javascript"></script>
    <![endif]-->
  <script src="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/js/progress-bar.js" type="text/javascript"></script>
  <script src="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/js/toggle-button.js" type="text/javascript"></script>
  <script src="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/js/app-bar.js" type="text/javascript"></script>
  <script src="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/js/jquery.easing.1.3.js" type="text/javascript"></script>
  <script src="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/js/mobiscroll-1.5.3.js" type="text/javascript"></script>

  <script src="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/js/cordova-2.5.0.js" type="text/javascript"></script>
  <script src="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/js/phoneTheme.js" type="text/javascript"></script>
  <script src="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/js/jquery.cordova.wp.themeswitcher.js" type="text/javascript"></script>
  <script src="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/js/dateTimePicker.js" type="text/javascript"></script>


  <script type="text/javascript">
    $.mobile.pushStateEnabled = false;
    var absoluteUrl = window.location.href;
    $.themesDir = absoluteUrl.substring(0, absoluteUrl.lastIndexOf('/')) + '/css/';

    $(document).bind('pagebeforeshow', function() {
      $("a[rel='external']").bind('click', function(event) {
        window.open(event.target.href, '_system', 'location=yes');
        return false;
      });
    })

     $().ready(function() {
      if ((typeof window.external.Notify == "undefined") || !$.browser.msie || parseInt($.browser.version) < 10) {
        $("#noteWP8Required").show();
      }

      // special title when run in Cordova environment
      if (typeof window.external.Notify !== "undefined") {
        document.getElementById("appTitle").innerHTML = "Theme overview";
      }

      $("[data-role=header]").fixedtoolbar({
        hideDuringFocus: ""
      });
    });
  </script>

</head>

<body>
  <div data-role="page" class="type-interior" data-theme="a">
    <div data-role="header" data-theme="a" data-position="fixed" data-tap-toggle="false">
      <span class="ui-app-title">Be inspired by WP8</span>

      <h1 id="appTitle">jQuery Mobile theme for Windows Phone 8</h1>
    </div>

    <div data-role="content" data-theme="a" style="min-height: 105% !important">
      <div data-role="fieldcontain">

        <h2>Welcome</h2>

        <p style="font-weight: bold">This theme provides a Windows Phone user interface for Apache Cordova apps using jQuery Mobile on Windows Phone 8.</p>
        <p>While the theme itself adds all windows phone specific colors and fonts by default, please don't forget to follow <a href="http://msdn.microsoft.com/en-us/library/windowsphone/design/hh202915%28v=vs.105%29.aspx" rel="external">user experience design guidelines</a>.</p>

        <p id="noteWP8Required" style="display: none">To view DateTime picker and Theme Switcher plugins of the jQM theme for Windows Phone, please view from within an Apache Cordova app in Windows Phone 8.</p>
        <h2>Browse</h2>

        <ul id="list-view-1" name="list-view-1" data-role="listview" data-inset="true">


          <li data-role="list-divider">jQMobile Standard</li>

          <li><a href="<div data-role=" page " class="type-interior " data-theme="a ">
    <div data-role="header " data-theme="a " data-position="fixed " data-tap-toggle="false ">
        <span class="ui-app-title ">Be inspired by WP8</span>

        <h1 id="appTitle ">jQuery Mobile theme for Windows Phone 8</h1>
    </div>

    <div data-role="content " data-theme="a " style="min-height: 105% !important ">
        <div data-role="fieldcontain ">

            <h2>Welcome</h2>

            <p style="font-weight: bold ">This theme provides a Windows Phone user interface for Apache Cordova apps using jQuery Mobile on Windows Phone 8.</p>
            <p>While the theme itself adds all windows phone specific colors
                and fonts by default, please don't forget to follow <a href="http://msdn.microsoft.com/en-us/library/windowsphone/design/hh202915%28v=vs.105%29.aspx " rel="external ">user experience design guidelines</a>.</p>

            <p id="noteWP8Required " style="display: none ">To view DateTime picker and Theme Switcher plugins of the jQM theme for Windows Phone, please view from within an Apache Cordova app in Windows Phone 8.</p>
            <h2>Browse</h2>

            <ul id="list-view-1 " name="list-view-1 " data-role="listview " data-inset="true ">


                <li data-role="list-divider ">jQMobile Standard</li>

                <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/fonts.html ">Fonts and colors</a></li>
                <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/header.html ">Headers and Footers</a></li>
                <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/list.html ">Listview and menus</a></li>
                <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/buttons.html ">Buttons</a></li>
                <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/form-elements.html ">Form elements</a></li>
                <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/dialogs.html ">Dialogs</a></li>
                <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/table-layout.html ">Table layout</a></li>


                <li data-role="list-divider ">Plugins</li>

                <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/progress-bar.html ">Progress bar</a></li>
                <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/appbar.html ">Application bar</a></li>
                <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/toggle.html ">Toggle button</a></li>
                <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/date-time.html ">DateTime Picker (Viewable only from an Apache Cordova app on Windows Phone 8)</a></li>
                <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/switcher.html ">Theme Switcher (Viewable only from an Apache Cordova app on Windows Phone 8)</a></li>

            </ul>
            
            <h2>Try Different Themes</h2>
            <br/>
            Use the following button to switch between Windows Phone Dark and Light themes, and the original jQueryMobile theme
            <div id="jqm-themeswitcher "></div>
            <h5>When viewed via an Apache Cordova app on Windows Phone all system colors will be automatically applied via <a href="pages/switcher.html ">Theme Switcher plugin</a></h5>
            <br/>
            <h2>Links</h2>
            <br/>
            <a href="http://sgrebnov.github.com/jqmobile-wp8-theme/ " rel="external ">Theme home page</a>
        </div>

    </div>


</div>">Fonts and colors</a>
          </li>
          <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/header.html">Headers and Footers</a>
          </li>
          <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/list.html">Listview and menus</a>
          </li>
          <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/buttons.html">Buttons</a>
          </li>
          <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/form-elements.html">Form elements</a>
          </li>
          <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/dialogs.html">Dialogs</a>
          </li>
          <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/table-layout.html">Table layout</a>
          </li>


          <li data-role="list-divider">Plugins</li>

          <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/progress-bar.html">Progress bar</a>
          </li>
          <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/appbar.html">Application bar</a>
          </li>
          <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/toggle.html">Toggle button</a>
          </li>
          <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/date-time.html">DateTime Picker (Viewable only from an Apache Cordova app on Windows Phone 8)</a>
          </li>
          <li><a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/switcher.html">Theme Switcher (Viewable only from an Apache Cordova app on Windows Phone 8)</a>
          </li>

        </ul>

        <h2>Try Different Themes</h2>
        <br/>Use the following button to switch between Windows Phone Dark and Light themes, and the original jQueryMobile theme
        <div id="jqm-themeswitcher"></div>
        <h5>When viewed via an Apache Cordova app on Windows Phone all system colors will be automatically applied via <a href="http://sgrebnov.github.io/jqmobile-wp8-theme/samples/jqm-public-demo/pages/switcher.html">Theme Switcher plugin</a></h5>
        <br/>
        <h2>Links</h2>
        <br/>
        <a href="http://sgrebnov.github.com/jqmobile-wp8-theme/" rel="external">Theme home page</a>
      </div>

    </div>


  </div>
</body>

</html>