how to add different jquery ui theme to visual studio 2012 MVC4 Project

Question

Can some explain to me step by step how i can change jquery ui themes in visual studio 2012, For example when i use this command, Install-Package jQuery.UI.Themes.lightness, how do i make ui-lightness to appear or if i choose another theme how to display it as well. The reason is because i don't want to use default theme which is the Base theme. i want to know the right file to change

Any help will be appreciated.

This is what i have already in my layout page.

   @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Content/themes/base/css")
    @Styles.Render("~/Content/themes/ui-lightness/css")
 @Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/themes/base/css")
 @Styles.Render("~/Content/themes/ui-lightness/css")

Answer 1

First make sure you are bundling the correct files.

App_Start/BundleConfig.cs

// you want to remove this
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
   "~/Content/themes/base/jquery-ui.core.css",
    ...
);
// and add this
bundles.Add(new StyleBundle("~/Content/themes/ui-lightness/css").Include(
    "~/Content/themes/ui-lightness/jquery-ui.core.css",
    ...
);

Then specify the bundled set in your layout.

_Layout.cshtml

@Styles.Render("~/Content/themes/base/css")          // remove this
@Styles.Render("~/Content/themes/ui-lightness/css")  // add this

This all assumes you installed the theme in /Content/themes

Easiest thing to do is find base and replace it with ui-lightness in your layout and bundle config.