Our HTML JS Dashboard does not provide a way to switch themes in applications using the same mechanism as in our online demo. This example demonstrates how to implement the required functionality in an Angular application.
In the asp-net-core-server folder run the following command:
dotnet run
In the dashboard-angular-app folder, run the following commands:
npm istall
npm start
Follow the steps below to implement the theme-switching functionality:
-
Remove all style registrations related to the dashboard from the styles.css file.
-
Add theme CSS files from the node_modules folder to assets. See the Angular.json file
-
To dynamically switch themes, include theme CSS files in the index.html page. Register CSS styles in the order shown in the Apply a Default theme section:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>DashboardTest</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" type="text/css" href='/assets/css/devextreme/dx.common.css'/> <link rel="dx-theme" type="text/css" data-theme="generic.light" href='/assets/css/devextreme/dx.light.css' data-active="true" /> <link rel="dx-theme" type="text/css" data-theme="generic.dark" href='/assets/css/devextreme/dx.dark.css' data-active="false" /> <link rel="dx-theme" type="text/css" data-theme="genericatat.carmine" href='/assets/css/devextreme/dx.carmine.css' data-active="false" /> <link rel="dx-theme" type="text/css" data-theme="genericatat.greenmist" href='/assets/css/devextreme/dx.greenmist.css' data-active="false" /> <link rel="stylesheet" type="text/css" href='/assets/css/analytics/dx-analytics.common.css' /> <link id="themeAnalytics" rel="stylesheet" type="text/css" href='/assets/css/analytics/dx-analytics.light.css' /> <link rel="stylesheet" type="text/css" href='/assets/css/analytics/dx-querybuilder.css' /> <link id="themeDashboard" rel="stylesheet" type="text/css" href='/assets/css/dashboard/dx-dashboard.light.css' /> </head> <body> <app-root></app-root> </body> </html>
Add DevExtreme themes as described in the following topic: Switch Between Themes at Runtime.
-
Handle the
onDashboardTitleToolbarUpdatedevent in the app.component.ts file and add a pop-up menu to the dashboard toolbar to switch themes:onDashboardTitleToolbarUpdated(args): void { var colorSchemaList = { "light": "Light", "dark": "Dark", "carmine": "Carmine", "greenmist": "Greenmist" }; args.options.actionItems.unshift({ type: "menu", icon: "colorSchemeIcon", hint: "Color Schema", menu: { items: Object.keys(colorSchemaList).map(function (key) { return colorSchemaList[key] }), type: 'list', selectionMode: 'single', selectedItems: [window.localStorage.getItem("dx-theme") || "light"], itemClick: function (data, element, index) { let newTheme = Object.keys(colorSchemaList)[index]; window.localStorage.setItem("dx-theme", newTheme); window.location.reload(); } } }); } ngAfterViewInit(): void { this.dashboardControl = new DashboardControl(this.element.nativeElement.querySelector(".dashboard-container"), { // Specifies a URL of the Web Dashboard's server. endpoint: "https://demos.devexpress.com/services/dashboard/api", workingMode: "Designer", extensions: { 'viewer-api': { onDashboardTitleToolbarUpdated: this.onDashboardTitleToolbarUpdated } } });
To register the color scheme icon, use the following code:
export classAppComponent implements AfterViewInit, OnDestroy { private dashboardControl: DashboardControl; private colorSchemeIcon = '<svg id="colorSchemeIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.dx_gray{fill:#7b7b7b;}</style></defs><title>Themes copy</title><path class="dx_gray" d="M12,3a9,9,0,0,0,0,18c7,0,1.35-3.13,3-5,1.4-1.59,6,4,6-4A9,9,0,0,0,12,3ZM5,10a2,2,0,1,1,2,2A2,2,0,0,1,5,10Zm3,7a2,2,0,1,1,2-2A2,2,0,0,1,8,17Zm3-8a2,2,0,1,1,2-2A2,2,0,0,1,11,9Zm5,1a2,2,0,1,1,2-2A2,2,0,0,1,16,10Z" /></svg>'; //.. ngAfterViewInit(): void { //... ResourceManager.registerIcon(this.colorSchemeIcon); //...
-
Import the themes property from the
devextreme/ui/themesfile to app.component.ts. This allows you to switch DevExtreme themes. -
Import the Document property from the
@angular/platform-browserfile to app.component.ts. It is also necessary to inject the static document property. This grants you access to the document property, and you can switch the Dashboard and Analytics themes. -
Use the following code to switch themes and render
dashboardControlafter a DevExtreme theme is changed:import { Component, AfterViewInit, ElementRef, OnDestroy, Inject } from '@angular/core'; import { DashboardControl, ResourceManager, DashboardPanelExtension } from 'devexpress-dashboard'; import { DOCUMENT } from "@angular/platform-browser"; import themes from "devextreme/ui/themes"; declare var require: (e) => any; //... export class DashboardComponent implements AfterViewInit, OnDestroy { private dashboardControl: DashboardControl; constructor(private element: ElementRef, @Inject(DOCUMENT) private document) { ResourceManager.embedBundledResources(); } //... switchThemes() :void{ let theme = window.localStorage.getItem("dx-theme") || "light"; if (theme==="light") return; this.document.getElementById('themeAnalytics').setAttribute('href','assets/css/analytics/dx-analytics.'+theme+'.css'); this.document.getElementById('themeDashboard').setAttribute('href','assets/css/dashboard/dx-dashboard.'+theme+'.css'); themes.current("generic."+theme); } ngAfterViewInit(): void { this.dashboardControl = new DashboardControl(this.element.nativeElement.querySelector(".dashboard-container"), { // Specifies a URL of the Web Dashboard's server. endpoint: "https://demos.devexpress.com/services/dashboard/api", workingMode: "Designer", extensions: { 'viewer-api': { onDashboardTitleToolbarUpdated: this.onDashboardTitleToolbarUpdated } } }); ResourceManager.registerIcon(this.colorSchemeIcon); this.switchThemes(); let db = this.dashboardControl; themes.ready(function () { db.render(); }); } //... }
-
If you face any issues with the Dashboard menu (for example, you can't close it after a theme is switched), it is necessary to use the following CSS:
.dx-dashboard-dashboard-form.dx-overlay-wrapper { left: 240px; }
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent