DevExtreme React - 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 18.1\DevExtreme\Sources\Lib\css by default. A folder with predefined themes is added to the application project templates as well.

View Demo

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 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" />
<!-- DevExtreme scripts must go below the "dx-theme" links -->
NOTE

If you use "dx-theme" links with Knockout, call ko.applyBindings() within the DevExpress.ui.themes.ready() callback. Otherwise, widgets can be rendered incorrectly.

JavaScript
var viewModel = {
    // ...
}
DevExpress.ui.themes.ready(function() {
    ko.applyBindings(viewModel);
});

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.