Angular Common - Utils - ui - themes
An object that serves as a namespace for the methods that work with DevExtreme CSS Themes.
current(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...
- <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.
- 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(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)
If you have technical questions, please create a support ticket in the DevExpress Support Center.