React 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-react/themes"

current()

Gets the current theme's name.

Return Value:

String

The current theme's name.

current(themeName)

Sets a theme with a specific name.

Parameters:
themeName:

String

The theme's name.

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.

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>

Refer to the Predefined Themes article for details on the themes that are supplied with DevExtreme.

initialized(callback)

Specifies a function to be executed after a theme is loaded.

Parameters:
callback:

Function

The function.

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:

index.js
  • import { createApp } from "vue";
  • import App from "./App.vue";
  •  
  • import themes from "devextreme/ui/themes";
  •  
  • themes.initialized(() => createApp(App).mount("#app"));

ready(callback)

Specifies a function to be executed each time a theme is switched.

Parameters:
callback:

Function

The function.

Refer to the current(themeName) description for a code example.