title: Apply Jquery Mobile ThemeRoller's theme to MVC4 Mobile Application
body: <p>Using visual studio 2013 I just created a MVC4 Mobile application. However I am not sure how to apply jquery mobile themeroller themes to it.</p>
  
  <p>I trued replacing existing theme css with my custom theme. It doesnt seem to work at all.</p>
  
  <p>Find the code below:</p>
  
  <pre><code>        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
  
          bundles.Add(new StyleBundle("~/Content/mobilecss").Include("~/Content/jquery.mobile*"));
  
          bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                      "~/Content/themes/base/jquery.ui.core.css",
                      "~/Content/themes/base/jquery.ui.resizable.css",
                      "~/Content/themes/base/jquery.ui.selectable.css",
                      "~/Content/themes/base/jquery.ui.accordion.css",
                      "~/Content/themes/base/jquery.ui.autocomplete.css",
                      "~/Content/themes/base/jquery.ui.button.css",
                      "~/Content/themes/base/jquery.ui.dialog.css",
                      "~/Content/themes/base/jquery.ui.slider.css",
                      "~/Content/themes/base/jquery.ui.tabs.css",
                      "~/Content/themes/base/jquery.ui.datepicker.css",
                      "~/Content/themes/base/jquery.ui.progressbar.css",
                      "~/Content/themes/base/jquery.ui.theme.css" /*custom theme file*/));
  
  &lt;head-&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;@ViewBag.Title&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /&gt;
      @Styles.Render("~/Content/mobileCss", "~/Content/css")
      @Scripts.Render("~/bundles/modernizr")  
  &lt;/head-&gt;
  </code></pre>
  
  <p>What am I missing here?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>somehow I cannot override the custom theme I have created using themerollers. I have not tried adding reference to files directly as below.</p>
  
  <pre><code>&lt;link rel="stylesheet" href="~/Content/jquery/jquery.mobile.theme-1.4.3.min.css" /&gt; &lt;!-- custom theme --&gt;
  &lt;link rel="stylesheet" href="~/Content/jquery/jquery.mobile.icons.min.css" /&gt; &lt;!-- custom theme icon file --&gt;
  &lt;link rel="stylesheet" href="~/Content/jquery.mobile-1.2.0.min.css" /&gt;
  &lt;link rel="stylesheet" href="~/Content/jquery.mobile.structure-1.2.0.min.css" /&gt;
  </code></pre>
  
  <p>After this I add the JS files. When I add the data-theme attribute to control with values 'a' or 'b' or 'c' I get the default colors, not the one I online in themeroller.</p>