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