Add Themes

To make your application, which was built using the DevExtreme UI widgets, appear native on the device it is running, a specific theme must be applied. DevExtreme includes a set of themes that are specific to different platforms. The generic "light" and "dark" themes are also available. These themes are not specific to a particular platform, but make the application look consistent on the desktop, as well as on any device.

Theme specific style settings are stored in a .css file with the appropriate name. For example, the dx.ios7.default.css file. Common style settings are stored in the dx.common.css stylesheet, which should always be linked to an application.

Review the subsections below to learn of two possible ways to provide links to the necessary files.

Use Local Themes

You can find all the required stylesheets in your DevExtreme package (see DevExtreme Packages).

To provide the required stylesheets for your application, place them into your project and provide links to them within the application page.

HTML
<link rel="stylesheet" type="text/css" href="/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="/css/dx.ios7.default.css" />

NOTE: An application should include a link to only one theme stylesheet. Otherwise, widgets can be displayed incorrectly.

If you use UI widgets within a DevExtreme application, the application automatically selects the appropriate theme depending on the platform it is working in. Therefore, a DevExtreme application should include links to stylesheets for all desired themes. Note that a stylesheet theme link looks like the following in this case.

HTML
<link rel="stylesheet" type="text/css" href="/css/dx.common.css" />
<link rel="dx-theme" data-theme="ios.default" href="/css/dx.ios7.default.css" />

NOTE: The "dx-theme" links must go before DevExtreme scripts.

Icons provided by built-in themes are stored in .eot, .woff and .ttf font files. If these files are stored on your server, ensure that server configuration contains definition for the following MIME types. Otherwise, icon fonts can be unavailable.

  • application/x-font-eot
  • application/x-font-woff
  • application/x-font-ttf

In addition, the css folder must include the icons folder with font icons.

For details on linking DevExtreme themes, refer to the Predefined Themes article.

Use a CDN

It is not always necessary to deliver stylesheets with a published application. There are times when it is best to use a link to these libraries from a Content Delivery Network (CDN). This can improve the performance of your applications.

The DevExpress CDN hosts DevExtreme stylesheets and enables you to easily add them to your applications. Links to the required files should be added in the following manner.

HTML
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.12/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.12/css/dx.ios7.default.css" />

NOTE: An application should include a link to only one theme stylesheet. Otherwise, widgets can be displayed incorrectly.

If you use UI widgets within a DevExtreme application, the application automatically selects the appropriate theme depending on the platform it is working in. Therefore, a DevExtreme application should include links to stylesheets for all desired themes. Note that a stylesheet theme link looks like the following in this case.

HTML
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.12/css/dx.common.css" />
<link rel="dx-theme" data-theme="ios.default" href="http://cdn3.devexpress.com/jslib/15.1.12/css/dx.ios7.default.css" />

NOTE: The "dx-theme" links must go before DevExtreme scripts.

NOTE: Font icons that are linked in CSS themes are also located on CDN.

For details on linking DevExtreme themes, refer to the Predefined Themes article.