Angular Common - utils - ui - themes - Methods

This section describes the methods exposed by the DevExpress.ui.themes object.

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.mytheme-dark" href="css/mytheme-dark.css" data-active="true" />
  • <link rel="dx-theme" data-theme="generic.mytheme-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 widgets after the theme has been loaded using the ready(callback) method.

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) dataGrid: DxDataGridComponent
  • @ViewChild(DxButtonComponent) button: DxButtonComponent
  •  
  • changeTheme() {
  • themes.ready(function() {
  • this.dataGrid.instance.repaint();
  • this.button.instance.repaint();
  • });
  • themes.current('mytheme-light');
  • // themes.current('mytheme-dark');
  • }
  • }

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

ready(callback)

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

Parameters:
callback:

Function

The function.

NOTE
The specified callback is executed only once. Call ready before each current(themeName) call to execute the callback each time the theme changes.