ActiveReportJS Viewer Themes

Built-in themes

ActiveReportsJS download package, CDN distribution and @grapecity/activereports npm package includes the following CSS files that are used to set up the appearance of ActiveReportsJS Viewer component:

• ar-js-ui.css - common styles that used for both Viewer and Designer components
• ar-js-viewer.css - styles for the default theme of the Viewer component
• dark-yellow-ui.css - common styles for "dark yellow" theme
• dark-yellow-viewer.css - styles for "dark yellow" theme of Viewer component
• green-ui.css - common styles for "green" theme
• green-viewer.css - styles for "green" theme of Viewer component
• light-blue-ui.css - common styles for the "light blue" theme
• light-blue-viewer.css - styles for "light-blue" theme of Viewer component

In order to use the default, "dark yellow", "green", or "light blue" theme of Viewer component, the corresponding css styles should be imported to the application. In pure JavaScript application it can be done by using link tags, for example:

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

In applications that support CSS loaders, you can import these styles can with an import statement, for example:

import "@grapecity/activereports/styles/light-blue-ui.css";
import "@grapecity/activereports/styles/light-blue-viewer.css";

Custom themes

You can also generate a custom color theme for the ActiveReportsJS Report Viewer component:

• Open the online theme editor
• Set up colors, fonts, and borders for various parts of the Report Viewer Component.
• Download the theme. The downloaded zip archive consists of 3 files: ar-js-ui.css, ar-js-viewer.css, and ar-js-designer.css. You can use the first two files exactly as described above. The third file is the style for the designer component.