Vue 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-vue/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.

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)

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:

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)

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.