current(themeName) switches between themes that you link in the <head> element. Add a <link rel="dx-theme"> element for each theme:

<link rel="dx-theme" data-theme="fluent-next.blue.dark" href="css/dx.fluent-next.blue.dark.css" data-active="true">
<link rel="dx-theme" data-theme="fluent-next.blue.light" href="css/dx.fluent-next.blue.light.css" data-active="false">

Pass a data-theme attribute value to current(themeName) to switch the active theme. This method updates DevExtreme styles automatically. To ensure that specific components apply the new styles, call their repaint() methods (if available) in a callback function passed to ready(callback). If you applied an inverted dark/light mode to specific containers while using a Fluent Next theme, call refreshMode() to apply updated modes to open overlays.

Callback functions passed to ready(callback) run only once, so call ready(callback) before each current(themeName) call:

function switchToLightTheme() {
    DevExpress.ui.themes.ready(() => {
        dataGridInstance.repaint();
        DevExpress.ui.themes.refreshMode();
    });
    DevExpress.ui.themes.current('fluent-next.blue.light');
}

import themes from "devextreme/ui/themes";

// ...
export class AppComponent {
    switchToLightTheme() {
        themes.ready(() => {
            dataGridInstance.repaint();
            themes.refreshMode();
        });
        themes.current('fluent-next.blue.light');
    }
}

<script setup lang="ts">
import themes from "devextreme/ui/themes";

function switchToLightTheme() {
    themes.ready(() => {
        dataGridInstance.repaint();
        themes.refreshMode();
    });
    themes.current('fluent-next.blue.light');
}
</script>

import { useCallback } from 'react';
import themes from "devextreme/ui/themes";

export default function App() {
    const switchToLightTheme = useCallback(() => {
        themes.ready(() => {
            dataGridInstance.repaint();
            themes.refreshMode();
        });
        themes.current('fluent-next.blue.light');
    }, []);

    // ...
}

See Also

• Predefined Themes
• Fluent Next Theme Customization

customAccentColor() returns the --dx-accent-color value defined in the :root scope. The returned value retains the format you specify (for instance, "SlateBlue" or "#6A5ACD").

See Also

• Fluent Next Theme Customization - Custom Accent Colors

This method defines the --dx-accent-color CSS variable in the :root scope. Fluent Next stylesheets calculate primary color shades from this variable, and DevExtreme components update their colors immediately. If you define a --dx-accent-color value in your stylesheets, customAccentColor(color) overrides this value.

customAccentColor(color) accepts the following CSS color values:

• Color names (for instance, "SlateBlue")
• Hexadecimal values
• rgb(), hsl(), and oklch() color functions
• References to CSS variables (for instance, "var(--my-brand-color)")

The accent color does not change if you pass an invalid value to this method.

After you remove a custom accent color that you specified with this method, components use the --dx-accent-color value from your stylesheets. If you do not define this value, components use the predefined accent color.

See Also

• Fluent Next Theme Customization - Custom Accent Colors

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:

import themes from 'devextreme/ui/themes';
// ...
themes.initialized(() => {
    platformBrowserDynamic().bootstrapModule(AppModule)
        .catch(err => console.error(err));
});

import { createApp } from "vue";
import App from "./App.vue";

import themes from "devextreme/ui/themes";

themes.initialized(() => createApp(App).mount("#app"));

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"))
);

mode(element) returns a calculated theme mode, not the mode class assigned to the passed element. The calculated theme mode for a dx-theme-mode-inverted container depends on the nearest enclosing theme mode. Refer to the following help topic for additional information: Container-Specific Theme Modes.

You can call this method under any DevExtreme theme and for any element (including elements outside theme mode containers). If no container specifies a mode for the element, mode(element) returns the active theme's mode ("light" or "dark").

If you change theme mode classes at runtime, mode(element) returns the updated value immediately.

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

When a container's theme mode changes at runtime, DevExtreme styles in this container update automatically. DevExtreme component overlays (for instance, popups and drop-down lists) render at the viewport level by default and do not update automatically.

If a theme mode container includes DevExtreme components that display overlays, call refreshMode() in the following scenarios:

• When you change the container's theme mode class
• When you call current(themeName) to switch between Fluent Next stylesheets (if the container uses the dx-theme-mode-inverted class)

See Also

• Fluent Next Theme Customization - Container-Specific Theme Modes