Apply Jquery Mobile ThemeRoller's theme to MVC4 Mobile Application

Question

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.

I trued replacing existing theme css with my custom theme. It doesnt seem to work at all.

Find the code below:

        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*/));

<head->
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="width=device-width" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    @Styles.Render("~/Content/mobileCss", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")  
</head->

What am I missing here?

Update:

somehow I cannot override the custom theme I have created using themerollers. I have not tried adding reference to files directly as below.

<link rel="stylesheet" href="~/Content/jquery/jquery.mobile.theme-1.4.3.min.css" /> <!-- custom theme -->
<link rel="stylesheet" href="~/Content/jquery/jquery.mobile.icons.min.css" /> <!-- custom theme icon file -->
<link rel="stylesheet" href="~/Content/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="~/Content/jquery.mobile.structure-1.2.0.min.css" />

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.

Answer 1

You haven't actually rendered your theme bundle. You're still rendering the default site.css. Change the the line:

@Styles.Render("~/Content/mobileCss", "~/Content/css")

To:

@Styles.Render("~/Content/mobileCss", "~/Content/themes/base/css")