ActiveReportJS Viewer Themes

Built-in Themes

The ActiveReportsJS download package, CDN distribution, and @mescius/activereportsjs npm package include the following CSS files that set up the appearance of the ActiveReportsJS Viewer component:

• ar-js-ui.css: Common styles used for both Viewer and Designer components.

• ar-js-viewer.css: Styles specific to the Viewer component, including several predefined themes:

  • System

  • Default

  • DefaultDark

  • DarkOled

  • HighContrast

  • HighContrastDark

  • ActiveReports

  • ActiveReportsDark

You can attach these styles to a page or component that hosts the ActiveReportsJS Report Viewer via the <link> tag:

<link
  rel="stylesheet"
  href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-viewer.css"
  type="text/css"
/>

Alternatively, you can include these styles via a CSS loader if it's supported in your application:

import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";

Setting the Viewer Component Theme

Pure JavaScript

To set the Viewer component theme in a pure JavaScript application, use either the configuration object passed to the component constructor or the theme property of the component instance:

var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host", {theme: 'ActiveReports'});
// or:
viewer.theme = 'ActiveReports';

React, Angular, Vue, Svelte

For the ActiveReports Report Viewer React, Angular, Vue, Svelte components, use the theme property of the component, for example:

import { Viewer as ReportViewer } from "@mescius/activereportsjs-react";

function App() {
  return (
    <div className="App">
        <ReportViewer theme="ActiveReports" />
    </div>
  );
}