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>DashboardAngularApp</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="generic.carmine" href='/assets/css/devextreme/dx.carmine.css' data-active="false" /> <link rel="dx-theme" type="text/css" data-theme="generic.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(); } } });
To register the color scheme icon, use the following code:
export class AppComponent implements AfterViewInit { 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
themesproperty from the devextreme/ui/themes file to app.component.ts. This allows you to switch DevExtreme themes. -
Import the
Documentproperty 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 { CommonModule, DOCUMENT } from '@angular/common'; import { DashboardControl, ResourceManager, DashboardControlArgs } from 'devexpress-dashboard'; import themes from "devextreme/ui/themes"; declare var require: (e) => any; // ... export class AppComponent implements AfterViewInit { private dashboardControl: DashboardControl; // ... public isThemeReady: boolean = false; constructor(private element: ElementRef, @Inject(DOCUMENT) private document) { } ngAfterViewInit(): void { ResourceManager.registerIcon(this.colorSchemeIcon); this.switchThemes(); themes.ready(() => { this.isThemeReady = true; }); } 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); } onBeforeRender(args: DashboardControlArgs) { this.dashboardControl = args.component; } }
-
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; }
(you will be redirected to DevExpress.com to submit your response)