DevExtreme Vue - Predefined Themes

DevExtreme comes with a set of predefined themes. Each theme is represented by CSS classes that are responsible for giving consistency to an application. Within the predefined themes, you will find those that are meant for your particular mobile platform. You can find the theme files in the DevExtreme zip archive or in the folder where you have installed DevExtreme, which is C:\Program Files (x86)\DevExpress 17.2\DevExtreme\Sources\Lib\css by default. A folder with predefined themes is added to the application project templates as well.

View Demo

Themes in DevExtreme Apps

In this topic, you will learn how to use predefined themes in applications that are built using the DevExtreme SPA framework.

Add the following links to the index.html file of your application.

HTML
<link rel="stylesheet" type="text/css" href="css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="css/dx.spa.css" />
<link rel="dx-theme" data-theme="android5.light" href="css/dx.android5.light.css" />
<link rel="dx-theme" data-theme="ios7.default" href="css/dx.ios7.default.css" />
<link rel="dx-theme" data-theme="win10.black" href="css/dx.win10.black.css" data-active="true" />
<link rel="dx-theme" data-theme="win10.white" href="css/dx.win10.white.css" data-active="false" />
<link rel="dx-theme" data-theme="generic.light" href="css/dx.light.css" data-active="true" />
<link rel="dx-theme" data-theme="generic.dark" href="css/dx.dark.css" data-active="false" />
<link rel="dx-theme" data-theme="generic.light.compact" href="css/dx.light.compact.css" data-active="false" />
<link rel="dx-theme" data-theme="generic.dark.compact" href="css/dx.dark.compact.css" data-active="false" />
<link rel="dx-theme" data-theme="generic.contrast" href="css/dx.contrast.css" data-active="false" />
<link rel="dx-theme" data-theme="generic.contrast.compact" href="css/dx.contrast.compact.css" data-active="false" />
NOTE
Add links to the dx.common.css and dx.spa.css files first before referencing the required themes. The dx.common.css file contains a set of common CSS classes that do not depend on the currently used device/browser. The dx.spa.css file must go second. It contains specific styles for views and layouts that are managed by the framework.
NOTE
The themes that are differentiated by a color scheme can be included together. But one of them should be set as the active one (see the data-active attribute within the links).
NOTE
The "dx-theme" links must go before DevExtreme scripts so that themes in the early stages of initialization can be processed. If "dx-theme" links are found afterwards, an error will occur.

When running, an application built using the DevExtreme SPA framework retrieves information about the device (its platform and device type) from the browser. A corresponding CSS class is applied to the root element of the page - the element that is accompanied by the "dx-viewport" class. If a style specific to the required platform is not found, a generic theme ("light" or "dark") is applied.

You can build a device-specific application supplying resources for a specific device only. In this case, you can expect that your application will have a particular theme applied. To set the target device for an application, use the DevExpress.devices.current method, passing an object that defines the target device.

JavaScript
window.MyApp = {};
$(function() {
    DevExpress.devices.current({
        platform: 'generic',
        deviceType: 'tablet'
    });
    MyApp.app = new DevExpress.framework.html.HtmlApplication({namespace: MyApp});
});
NOTE
The target device should be set before an application object is created.

When there are several themes provided for the same platform(device), you can switch between them at runtime. For this purpose, use the ui.themes.current method.

JavaScript
DevExpress.ui.themes.current('win10.white');  //Windows 10 Light theme
//DevExpress.ui.themes.current('win10.black');  //Windows 10 Dark theme

If your application uses a single theme only, you can link this theme using a classic HTML tag.

HTML
<link rel="stylesheet" type="text/css" href="css/dx.light.css" />

Themes in Sites

In this topic, you will learn how to use predefined themes in websites that are built using DevExtreme UI widgets.

Add the following links to the main page of your site.

HTML
<link rel="stylesheet" type="text/css" href="css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="css/dx.light.css" />
<!--link rel="stylesheet" type="text/css" href="css/dx.dark.css" /-->
NOTE
Add a link to the dx.common.css file before referencing the required theme. The dx.common.css file contains a set of common CSS classes that are not related to the currently applied theme.

If you need to have links to both the "light" and "dark" themes, replace the classic tag with the DevExtreme custom "dx-theme" tag.

HTML
<link rel="stylesheet" type="text/css" href="css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="css/dx.light.css" data-active="true" />
<link rel="dx-theme" data-theme="generic.dark" href="css/dx.dark.css" data-active="false" />
NOTE
The "dx-theme" links must go before DevExtreme scripts in order to process themes in the early stages of initialization. If "dx-theme" links are found afterwards, an error will occur.

Since the "light" and "dark" themes are alternates (to each other), one of them must be set as an active one (see the data-active attribute within the links). But you can allow end users to change to the desired theme at runtime. For this purpose, use the ui.themes.current method.

JavaScript
DevExpress.ui.themes.current('generic.light');  //Generic Light theme
//DevExpress.ui.themes.current('generic.dark');  //Generic Dark theme

Themes for Visualization Widgets

The widgets that come with the DevExtreme data visualization library do not apply predefined themes. They do have different themes, but they are defined as a set of default values for widget configuration options. To learn more, refer to the Appearance Customization article.