Using ActiveReports.NET Web Designer and JS Viewer Custom Themes

Hey everyone! Today, we’ll highlight one of our exciting new features in ActiveReports.NET 18 and summarize how to use it.

What it is:

We’ve added a new API for both the Web Designer and the JS Viewer to easily create custom themes. With these custom themes, you can adjust the colors of just about everything in the Designer and Viewer interfaces to suit the needs of your use case. You can set a default theme, provide several themes for users to switch between, and even set separate light mode and dark mode theme defaults that will automatically change based on the user’s system settings to match their environment.

On top of the ability to create your own custom themes, the Web Designer and JS Viewer now both come with a handful of new theme options that you are welcome to use as-is or as a starting point for your own themes.

The sample project we showcase in the GIF above is in our ActiveReports.NET samples GitHub repository.

How to use it:

The steps and examples below show how to create a basic custom theme and apply it to both the WebDesigner and JS Viewer components of ActiveReports.NET. For comprehensive details, including all possible theme properties and additional options, we recommend referring to the official Web Designer and Js Viewer Themes documentation.

To create a custom theme and add it to your ActiveReports.NET Web Designer project, follow these summarized steps:

1. Create a Custom Theme Object: Utilize the GrapeCity.ActiveReports.DesignerThemes or GrapeCity.ActiveReports.ViewerThemes API to create a custom theme object. This involves setting various color properties using the .color.rgba() or .color.hex() methods for different theme aspects like background, text, accents, shadows, etc.

   1. Important Note: If you create a theme using the WebDesigner API, you can pass the same theme to the Js Viewer. You can't pass a theme created using the JS Viewer API to the WebDesigner.

2. Apply the Theme to WebDesigner: Pass the custom theme object to the WebDesigner by using the themes configuration option in the GrapeCity.ActiveReports.Designer.create() method. You can set your custom theme as the default or include it in a list of selectable themes.

3. Apply the Theme to JS Viewer: Similar to the WebDesigner, pass the custom theme object to the JS Viewer using the theme configuration option in the GrapeCity.ActiveReports.JSViewer.create() method. This will apply your custom theme to the viewer.

4. Additional Customizations: Adjust additional UI elements like shadows, borders, and hover effects by setting the respective properties in your theme object.

Here's a simplified code example to demonstrate these steps:

// Define the custom theme object
var MyCustomTheme = {
    name: "MyTheme",
    accent: GrapeCity.ActiveReports.DesignerThemes.color.rgba(0, 100, 0, 255),
    backgroundBody: GrapeCity.ActiveReports.DesignerThemes.color.rgba(30, 30, 30, 255),
    textColor: GrapeCity.ActiveReports.DesignerThemes.color.rgba(255, 255, 255, 255),
    // Define other theme properties as needed
};

// Apply the theme to WebDesigner
// Setting a default theme and providing a list of theme options that the user can toggle
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
    themes: {
        default: 'MyTheme',
        list: [MyCustomTheme]
    }
});

// Apply the theme to JS Viewer
// Setting one specific theme
GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    theme: MyCustomTheme
});

Ready to Get Started? Download ActiveReports.NET Today!