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.ios.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, you can put them into your project and give 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.ios.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.ios.default.css" />

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

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/14.2.12/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/14.2.12/css/dx.ios.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/14.2.12/css/dx.common.css" />
<link rel="dx-theme" data-theme="ios.default" href="http://cdn3.devexpress.com/jslib/14.2.12/css/dx.ios.default.css" />

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

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