Themes for the report designer and viewer in JavaScript products

Author: Eliza Leppik
When developing software, the design of the graphical user interface (GUI) plays a significant role. In fact, the GUI is the "face" of the product for users. This highlights the importance of its appearance, adaptability, usability, and simplicity. In Stimulsoft components, it is possible to customize the appearance of the user interface using built-in themes and various color shades.

In this article, we will explore how to change the themes of the report designer and viewer in Stimulsoft Reports.JS and Stimulsoft Dashboards.JS.

Changing the viewer theme

To change the theme when creating a StiViewer component, you need to select one of the StiViewerTheme enumerations for the theme property in the StiViewerOptions class. By default, if the theme property is not specified, the StiViewerTheme.Office2022WhiteBlue value is used. Below is an example of how to change the viewer theme: 
...
let options = new Stimulsoft.Viewer.StiViewerOptions();
options.appearance.theme = Stimulsoft.Viewer.StiViewerTheme.Office2022BlackBlue;

let viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
viewer.renderHtml();
...
After that, the report viewer will launch with the specified theme.

Changing the report designer theme

Similarly, you can change the theme for the StiDesigner component. The only difference is that the StiDesignerOptions settings class is used. Below is an example of how to change the report designer theme: 
...
let options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.theme = Stimulsoft.Designer.StiDesignerTheme.Office2022BlackBlue;
				
let designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);
designer.renderHtml();
...
After that, the report designer will launch with the specified theme.

Changing the theme on the fly

Sometimes, it's necessary to change the GUI theme not during the component initialization, but under certain conditions for example, in an event handler or by allowing the user to select a theme in the interface (e.g., via a dropdown menu or a button). You can change the theme on the fly using the special applyTheme method, which takes one of the StiViewerTheme or StiDesignerTheme enumerations as its argument. 
...
viewer.applyTheme(StiViewerTheme.Office2022WhiteBlue);

...

designer.applyTheme(StiDesignerTheme.Office2022WhiteBlue);
...

Changing themes in React, Vue.js, and Angular applications

When integrating Stimulsoft components into applications built with React, Vue.js, or Angular, it’s also possible to change the UI theme. The process of changing the theme is similar to the JavaScript implementation but takes into account the specifics of each respective framework. You can learn more about changing themes in React, Vue.js, and Angular components through our examples:



Thus, Stimulsoft provides a unified and flexible theming mechanism that is supported not only in Vanilla JavaScript, but also in React, Vue.js, and Angular. Themes can be applied both during component initialization and dynamically at runtime, making it easier to integrate and customize the user interface to meet specific project requirements.
By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.
I agree