How to Use Custom Themes in ActiveReportsJS

Applying a common theme or style to a JavaScript component you did not create can be tricky. You need to know the CSS classes and how they are used in the component. If you are not a designer, this is even more difficult. Instead of doing this manually, you should use a tool that automates the creation of such designs. That's why we created the Theme Editor.

The Theme Editor is a CSS file generator that enables you to create custom themes for the ActiveReportsJS Viewer component. You can change colors, the appearance of input fields, fonts, and font sizes.

The Theme Editor is accessible online here.

You can customize the viewer using the variables listed in the right-side panel and view some of those changes immediately. Click the "Preview" button to see your theme applied to the viewer.

Customize Your Theme

To create a theme, use the right-side panel to add your configurations for colors, border-radius, and fonts. You can also search the available variables to configure by clicking the "Variables" button.

Start by toggling the Theme variable for a light or dark theme base.

Default Themes

The ActiveReportsJS Viewer has two default themes: light and dark. These themes only apply to the toolbar and viewer surface, and can not be customized using the Theme Editor. The light theme is the default theme that uses shades of grey for the background of the toolbar and viewer surface, while the dark theme uses shades of black.

Colors for Themes

The accent color is the main color of the viewer used for emphasis. It applies to the background of the side panel, some text and buttons, and icons in the toolbar. The contrast color is the secondary color that will primarily be used in the side panel for text and icons. Error and warning are for notifications that appear in modals. These will only appear if the report file is not loaded correctly.

I have chosen the colors of the Pittsburgh Steelers NFL team, using the dark theme as a base and the classic black and gold colors for accent and contrast. The error and warning colors match the blue and red stars in the Steelers logo also. Upon preview, we get the authentic feel of the Steeler's theme.

NOTE: Click the back button next to preview to go back to the editor, not the browser's back button.

Border Radius for Web-Based Reporting

The border radius variable applies to items in the side panel. Input elements like buttons, checkboxes, and textboxes will apply the border-radius defined in this variable field. Increase the numerical value here for rounded input elements.

Theme Fonts

You can also specify fonts and font sizes for your theme. Add your font name to the font family, and include a few backup fonts in case they are not available. The Theme Editor supports web-safe fonts, so you will not be able to preview some fonts.

Take a close look at the Steeler's theme; you will notice that the primary font, Gunplay, is not displayed on the preview. Gunplay is not a standard font, so the Courier New font is presented instead. You can still use Gunplay font in your application, as long as it is installed.

Create a Theme Design

When you are ready to create your theme, click the download button. The CSS file contains the theme details.

Add a Theme to Your Application

The downloaded CSS file needs to be added to your application to apply the custom theme. Add the file to a folder in your application and include a tag to reference the theme in your HTML file or import a statement in the proper .js file if you are using CSS/Style loader.

Once the application is set up correctly, you can run your application and see the theme applied. If your fonts are installed, they will display as well.

Theme Editor Recap

The Theme Editor ensures that the design is consistent throughout the component and saves you and your team valuable development time. It only takes a few minutes to create your theme and add it into your application. We hope you find it useful when adapting ActiveReportsJS with your products.