Changing the Viewer Theme
Our sample projects and report templates can help you learn the basics of working with our products.The dashboard viewer supports many themes, chosen through the options object from the
In Angular.
How it works. The theme is a viewer option, so one assignment reskins the entire preview.
StiViewerTheme enumeration.In Angular.
import { Component } from "@angular/core";
import { Viewer, Stimulsoft } from "stimulsoft-dashboards-js-angular/viewer";
@Component({
imports: [Viewer],
template: `<sti-viewer [report]="report" [options]="options"></sti-viewer>`
})
export class Example {
report: Stimulsoft.Report.StiReport;
options: Stimulsoft.Viewer.StiViewerOptions;
constructor() {
this.report = new Stimulsoft.Report.StiReport();
this.report.loadFile("Dashboards/Dashboard.mrt");
this.options = new Stimulsoft.Viewer.StiViewerOptions();
this.options.appearance.theme = Stimulsoft.Viewer.StiViewerTheme.Office2022WhiteViolet;
this.options.appearance.fullScreenMode = true;
}
}options.appearance.theme— one of theStiViewerThemepresets that restyles the whole viewer UI.- The options object is passed to the
Viewercomponent together with the report.
How it works. The theme is a viewer option, so one assignment reskins the entire preview.