Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Collapse]eXpressApp Framework
 [Expand]Fundamentals
 [Expand]Getting Started
 [Expand]Concepts
 [Expand]Design-Time Features
 [Expand]Deployment
 [Collapse]Task-Based Help
  [Expand]Business Model Design
  [Expand]Application Model
  [Expand]Actions
  [Expand]Navigation
  [Expand]Views
  [Expand]List Editors
  [Expand]Property Editors
  [Expand]Templates
  [Expand]Filtering
  [Expand]Reporting
  [Expand]Dashboards
  [Expand]Scheduler and Notifications
  [Expand]Maps
  [Expand]Security
  [Expand]Workflow
  [Expand]Localization
  [Expand]Testing
  [Collapse]Miscellaneous UI Customizations
    How to: Add a Button to a Detail View Using Custom View Item
    How to: Add an XAF Mobile Custom Module
    How to: Adjust the Size and Style of Pop-up Dialogs (ASP.NET)
    How to: Adjust the Windows' Size and Style
    How to: Change an Application Logo and Info
    How to: Create a Custom Control Detail Item
    How to: Customize a Window Caption
    How to: Customize ASP.NET Layout Elements Using Custom CSS Classes
    How to: Customize Export Options of the Printing System
    How to: Customize the Conditional Appearance Module Behavior
    How to: Customize Window Status Messages (WinForms)
    How to: Enable High DPI Support in a WinForms Application
    How to: Implement a Custom Messaging Class
    How to: Include an Action to a Detail View Layout
    How to: Raise XAF Callbacks from Client-Side Events and Process these Callbacks on Server
    How to: Set Images and Captions for Enumeration Values
    How to: Show a Custom Window with an Embedded XAF View
    How to: Show a Custom Windows Form
    How to: Use a Custom Plugin in a Mobile Application
    How to: Use a Custom Splash Screen
    How to: Use a DevExtreme Chart in a Mobile Application
    How to: Use Custom Themes in ASP.NET Applications
  Frequently Asked Questions (FAQ)
 [Expand]API Reference
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
This documentation page describes implementations made in our v17.2 release cycle. To learn about functionality shipping with v18.1, navigate to our updated help file experience at docs.devexpress.com. Learn More

How to: Use Custom Themes in ASP.NET Applications

By default, an ASP.NET XAF application uses themes from the ASPxThemes Assembly. You can use custom assemblies as well. This topic details approaches to customizing default themes. To learn more about these themes, see the Appearance Customization - Theming topic in the ASP.NET controls documentation. To learn the basics behind the appearance of ASP.NET sites in XAF applications, refer to the ASP.NET Web Application Appearance topic.

This topic includes the following sections.

Expanded Add Assemblies with Custom Themes

You can add a custom theme in addition to the themes that are supplied with the DevExpress.Web.ASPxThemes.18.1.dll assembly. For this purpose, do the following.

  • Invoke ASP.NET Theme Builder as described in the Launching the Theme Builder topic, and create a new theme. For ASP.NET applications with the New Web UI, it is recommended to create themes based on the XafTheme theme. Customize the newly created theme and save changes.

    Note

    Ensure that the name of the newly created theme is unique for your project; otherwise change it in the Theme Properties... dialog.

    Currently, the Theme Builder tool does not support editing XAF-specific css files. So, it is necessary to modify css files manually.

  • After theme customization is finished, use Theme Builder to create an assembly with this theme. See the Generating a Custom Theme Assembly topic for details.

  • Reference this assembly in your web application project.

  • Open the application's Web.config configuration file, set the customThemeAssemblies attribute to the target assembly with a custom theme, and set themeName to the name of this theme in the theme element of the devExpress section.

  • Rebuild the solution.

See the Using a Custom Theme Assembly topic for additional information.

Expanded Override Skin Files from Built-in Themes

You can override skin files from themes located in a theme assembly. For this purpose, do the following.

  • Deploy skins from required themes to the App_Themes folder in your project. To do this, use the ASP.NET Theme Deployer tool.
  • Replace required skin files with custom ones.
  • Choose the default theme using the standard ASP.NET approach – by specifying the pages element in the application's Web.config configuration file.

    Leave the enableThemesAssembly attribute of the themes element set to true.

In applications with the Classic Web UI, themes, deployed to the App_Themes folder, will be added to the ChooseTheme Action as items, and will be available at runtime.

Expanded Override Built-in Themes

You can customize built-in themes. Follow the steps below to use them at runtime.

  • Deploy the required themes to the App_Themes folder in your project. To do this, use the ASP.NET Theme Deployer. They can be already customized, otherwise customize them directly in the project.
  • Set enableThemesAssembly to false and theme to an empty string in the themes element of the Web.config file.

  • Choose the default theme using the standard ASP.NET approach – by specifying the theme attribute of the pages element in the application's Web.config configuration file.

In applications with the Classic Web UI, themes, deployed to the App_Themes folder, will be added to the ChooseTheme Action as items, and will be available at runtime.

Expanded Register Additional CSS Files

If you need additional CSS files of a particular theme to be used on a page, register these files using the RegisterThemeAssemblyController. For this purpose, invoke the RegisterThemeAssemblyController's RegisterCss static method from a module's constructor. Pass the required style path as the method's path argument.

Expanded Switch Between Themes for New and Classic Web UI

If you want to switch between themes for New and Classic Web UI according to the template chosen on the application start it is necessary to create a custom theme manager. The theme manager allows you to switch between themes depending on the device type or any other parameter. Note, that the standard ASP.NET way to set a theme in an application configuration file is not appropriate for this scenario.

Create an assembly with themes that use templates for the Classic and New web UI, as described in the Add Assemblies with Custom Themes section, and create a custom theme manager, which implements the ICurrentThemeManager interface. The code snippet below demonstrates an example of its implementation.

Open the Global.asax.cs (Global.asax.vb) file, located in the application project, and add the following code to the Application_Start method to use the custom theme manager.

Is this topic helpful?​​​​​​​