Applying Themes - The DevExpress Approach

• Jan 14, 2021
• 3 minutes to read

DevExpress Extensions for ASP.NET MVC ship with a set of built-in predefined visual themes that allow you to provide a consistent appearance through your website. For a list of prepackaged themes, see the Available Themes topic. By default, theme elements of all available built-in themes are embedded as resource files into a specific ASPxThemes Assembly shipped within the installation. To learn more, refer to the DevExpress Themes Overview topic.

Note

You can use the Project Wizard to specify a theme for your newly created web application. The wizard sets the Theme Name attribute in web.config.

Applying a Theme to a Website

To apply a theme to a web application, perform the following steps:

1. Add the required style sheets to the View using the ExtensionsFactory.GetStyleSheets method.

   The following code demonstrates how to add style sheets for all DevExpress MVC Extensions:

   Razor (_Layout.cshtml)

   @Html.DevExpress().GetStyleSheets( 
       new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout, Theme="Aqua" }, 
       new StyleSheet { ExtensionSuite = ExtensionSuite.Editors, Theme="Aqua" }, 
       new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor, Theme="Aqua" }, 
       new StyleSheet { ExtensionSuite = ExtensionSuite.GridView, Theme="Aqua" }, 
       new StyleSheet { ExtensionSuite = ExtensionSuite.PivotGrid, Theme="Aqua" },
       new StyleSheet { ExtensionSuite = ExtensionSuite.Chart, Theme="Aqua" },
       new StyleSheet { ExtensionSuite = ExtensionSuite.Report, Theme="Aqua" },
       new StyleSheet { ExtensionSuite = ExtensionSuite.Scheduler, Theme="Aqua" },
       new StyleSheet { ExtensionSuite = ExtensionSuite.TreeList, Theme="Aqua" }
   )
   

2. Specify the extension theme in the Global.asax file or in web.config.

   The code sample below demonstrates how to specify a theme of DevExpress Extensions in Global.asax:

   C# (Global.asax)

   protected void Application_PreRequestHandlerExecute(object sender, EventArgs e) {
       DevExpressHelper.Theme = "Aqua";
   }
   

   The code sample below demonstrates how to specify a theme of DevExpress Extensions in web.config:

   XML (Web.config)

   <devExpress>
       <themes enableThemesAssembly="true" styleSheetTheme="" theme="Aqua" />
       <!-- ... -->
   </devExpress>
   

Note that if you only call the ExtensionsFactory.GetStyleSheets method in this implicit manner (i.e., without specifying the theme name via a stylesheet object’s StyleSheet.Theme property), and do not specify a global theme in web.config or via the DevExpress helper’s static property, style sheets of the Default DevExpress theme will be attached. This Default DevExpress theme will automatically be applied to all DevExpress extensions.

Applying a Theme to an Extension

If you need to apply a theme to a standalone extension, perform the following steps:

1. In the View code, add the style sheets for the required extension suite explicitly (by specifying the theme name via a stylesheet object’s StyleSheet.Theme property), as it is shown in a code sample below:

   Razor (View)

   @Html.DevExpress().GetStyleSheets( 
       new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor, Theme="MetropolisBlue" },
       new StyleSheet { ExtensionSuite = ExtensionSuite.Editors, Theme="MetropolisBlue" },
       new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout, Theme="MetropolisBlue" }
   )
   ...
   

   Note that themes that are specified explicitly via the ExtensionsFactory.GetStyleSheets method are always rendered irrespective of which theme is specified globally (in web.config or via the DevExpress helper’s static Theme property).

2. Define the extension’s Theme property value:

   Razor (Partial View)

   @Html.DevExpress().HtmlEditor(settings =>
    {
        settings.Name = "HtmlEditor";
        ...
        settings.Theme = "MetropolisBlue";
        ...
    }).GetHtml()
   

Note

When adding style sheets for the HtmlEditor, GridView and TreeList MVC Extensions, you should also add the style sheets for the Data Editors and Navigation and Layout extensions.

Theme Application Precedence

The order of precedence for applying a DevExpress theme (from lowest to highest priority) is as follows.

• The DevExpress Theme Name Web.config option.
• static DevExpressHelper.Theme property.
• SettingsBase.Theme property of individual extensions.