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.
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.
<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" /-->
If you need to have links to both the "light" and "dark" themes, replace the classic tag with the DevExtreme custom "dx-theme" tag.
<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" />
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.
DevExpress.ui.themes.current('generic.light'); //Generic Light theme //DevExpress.ui.themes.current('generic.dark'); //Generic Dark theme
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.