jQuery/JS Common - Utils - ui - themes
An object that serves as a namespace for the methods that work with DevExtreme CSS Themes.
import ui.themes from "devextreme/ui/themes"
current(themeName)
Parameters:
themeName:
The theme name passed as a parameter should be the value of the data-theme attribute used within the rel="dx-theme" links to the theme. For instance, if you have links to two of your themes...
HTML
- <link rel="dx-theme" data-theme="generic.dark" href="css/mytheme-dark.css" data-active="true">
- <link rel="dx-theme" data-theme="generic.light" href="css/mytheme-light.css" data-active="false">
... you can switch between them as shown in the code below. Note that you should specify a callback function that repaints all UI components after the theme has been loaded using the ready(callback) method.
JavaScript
- DevExpress.ui.themes.ready(function () {
- $("#dataGridContainer").dxDataGrid("repaint");
- // Call other UI components' repaint() method here
- });
- DevExpress.ui.themes.current('generic.light');
- // DevExpress.ui.themes.current('generic.dark');
Refer to the Predefined Themes article for details on the themes that are supplied with DevExtreme.
ready(callback)
Parameters:
callback:
Refer to the current(themeName) description for a code example.
Feedback