主题
ActiveReportsJS 下载包, CDN 分发 和 @grapecity/activereports npm包 包括以下CSS文件，这些文件用于设置 ActiveReportsJS设计器 组件的外观：
- ar-js-ui.css - 用于Viewer和Designer组件的常见样式
- ar-js-designer.css - 设计器组件的默认主题的样式
- dark-yellow-ui.css - “深黄色”主题的常用样式
- dark-yellow-designer.css - 设计器组件的“深黄色”主题样式
- green-ui.css - “绿色”主题的常用样式
- green-designer.css - 设计器组件的“绿色”主题样式
- light-blue-ui.css - “浅蓝色”主题的常用样式
- light-blue-designer.css - 设计器组件的“浅蓝色”主题样式
为了使用设计器组件的默认主题：“深黄色”，“绿色”或“浅蓝色”，应将相应的CSS样式导入到应用程序中。 在纯JavaScript应用程序中，可以通过使用link标签来完成，例如：
<link
rel="stylesheet"
href="http://cdn.grapecity.com/activereportsjs/2.0.0-beta/styles/ar-js-ui.css"
type="text/css"
/>
<link
rel="stylesheet"
href="http://cdn.grapecity.com/activereportsjs/2.0.0-beta/styles/ar-js-designer.css"
type="text/css"
/>
在支持CSS加载器的应用程序中，可以使用import语句导入这些样式，例如：
import "@grapecity/activereports/styles/light-blue-ui.css";
import "@grapecity/activereports/styles/light-blue-designer.css";
自定义主题
您还可以为ActiveReportsJS报表设计器组件生成自定义颜色主题：