Easy Theme Customization for DevExpress ASP.NET Controls

Back in 2014, I announced a new set of themes for our DevExpress ASP.NET Web Forms Controls and ASP.NET MVC extensions. It goes without saying that these themes looked great, but, perhaps even better, they allowed you to easily customize the theme's base font and color. This was a huge improvement over our traditional 'classic' themes because you could now quickly create a version of one of the new themes to suit your business needs and design.

The bad news was that, in order to take advantage of this feature, you had to use our 'Theme Builder' tool.

Settings - Web.Config, API, etc.

So now for some good news! You can now simply set that base font and color for DevExpress ASP.NET and MVC controls directly from the web.config file or by using our API! The following examples work with DevExpress ASP.NET v16.2 and above.

Web.config

In your web.config, specify the 'baseColor' and 'font' settings in the themes of DevExpress section:

<configuration>
  ...
  <devExpress>
    ...
    <themes enableThemeAssembly="true"
                 styleSheetTheme=""
                 theme="Metropolis"
                 customThemeAssemblies=""
                 baseColor="Green"
                 font="30px Calibri" />
    ...
  </devExpress>
  ...
</configuration>

Programmatic API

You can also set the base font and color using API calls:

protected void Application_PreRequestHandlerExecute(object sender, EventArgs e) {
    ...
    DevExpress.Web.ASPxWebControl.GlobalThemeBaseColor = "Green";
    DevExpress.Web.ASPxWebControl.GlobalThemeFont = "30px 'Calibri'";
}

Or in ASP.NET MVC you use the following approach:

protected void Application_PreRequestHandlerExecute(object sender, EventArgs e) {
    ...
    DevExpress.Web.MVC.DevExpressHelper.GlobalThemeBaseColor = "#00FF00";
    DevExpress.Web.MVC.DevExpressHelper.GlobalThemeFont = "30px 'Calibri'";
}

The value formats for the color work with RGB, Hexadecimal, and Color names too. Learn more here.

Limitations

Only the following themes support the changing both the base color and font: Mulberry, Moderno, Metropolis, Metropolis Blue, iOS, Material, and Material Compact.

These classic themes allow you to set the base font only: Aqua, Black Glass, Glass, Office2003Blue, Office2003Olive, Office2003Silver, PlasticBlue, RedWine, SoftOrange, and Youthful.

Documentation

Check out this excellent help documentation topic that gives even more detail:

Theming > Changing Theme Base Color and Font Settings

Demos

Try out the latest DevExpress ASP.NET demos online and experience the theme parameters change dynamically. You can use the theme options on the top right:

Then, drop me a line below on what you think about the easy way to customize a DevExpress ASP.NET theme. Thanks!

Free DevExpress Products - Get Your Copy Today