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.
jQuery
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');Angular
TypeScript
import themes from "devextreme/ui/themes";
import { Component, ViewChild } from "@angular/core";
import { DxDataGridComponent, DxButtonComponent } from "devextreme-angular";
@Component({
selector: 'my-app',
template: `
<dx-data-grid [dataSource]="dataSource"></dx-data-grid>
<dx-button text="Change Theme" (onClick)="changeTheme()"></dx-button>
`
})
export class AppComponent {
@ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
@ViewChild(DxButtonComponent, { static: false }) button: DxButtonComponent;
// Prior to Angular 8
// @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
// @ViewChild(DxButtonComponent) button: DxButtonComponent;
changeTheme() {
themes.ready(() => {
this.dataGrid.instance.repaint();
this.button.instance.repaint();
});
themes.current('generic.light');
// themes.current('generic.dark');
}
}Vue
App.vue
<template>
<DxDataGrid ...
:ref="dataGridRefKey"
/>
<DxButton
:ref="buttonRefKey"
text="Change Theme"
@click="changeTheme"
/>
</template>
<script>
import DxDataGrid from 'devextreme-vue/data-grid';
import DxButton from 'devextreme-vue/button';
const dataGridRefKey = 'my-data-grid';
const buttonRefKey = 'my-button';
export default {
components: {
DxDataGrid,
DxButton
},
data() {
return {
dataGridRefKey,
buttonRefKey
}
},
computed: {
dataGrid: function () {
return this.$refs[dataGridRefKey].instance;
},
button: function () {
return this.$refs[buttonRefKey].instance;
}
},
methods: {
changeTheme() {
themes.ready(() => {
this.dataGrid.repaint();
this.button.repaint();
});
themes.current('generic.light');
// themes.current('generic.dark');
}
}
}
</script>React
App.js
import React from 'react';
import DataGrid from 'devextreme-react/data-grid';
import Button from 'devextreme-react/button';
import themes from 'devextreme/ui/themes';
export default function App() {
const dataGrid = React.useRef(null);
const button = React.useRef(null);
const changeTheme = React.useCallback(() => {
themes.ready(() => {
dataGrid.current.instance.repaint();
button.current.instance.repaint();
});
themes.current('generic.light');
// themes.current('generic.dark');
}, []);
return (
<React.Fragment>
<DataGrid ...
ref={dataGrid}
/>
<Button
ref={button}
text="Change Theme"
onClick={changeTheme}
/>
</React.Fragment>
);
}Refer to the Predefined Themes article for details on the themes that are supplied with DevExtreme.
initialized(callback)
Parameters:
callback:
In some situations, UI components may apply their configuration or calculate their sizes before a theme is loaded. If you encounter issues with component appearance, use initialized(callback) to ensure that all styles are applied:
Angular
main.ts
import themes from 'devextreme/ui/themes';
// ...
themes.initialized(() => {
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
});Vue
index.js
import { createApp } from "vue";
import App from "./App.vue";
import themes from "devextreme/ui/themes";
themes.initialized(() => createApp(App).mount("#app"));React
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
import themes from "devextreme/ui/themes";
themes.initialized(() =>
ReactDOM.render(<App />, document.getElementById("app"))
);ready(callback)
Parameters:
callback:
Refer to the current(themeName) description for a code example.
Feedback