# ActiveReportJS 디자이너 테마

## Content



ActiveReportsJS [다운로드 패키지](https://www.grapecity.com/activereportsjs/download), CDN 배포 및 [@grapecity/activereports](https://www.npmjs.com/package/@grapecity/activereports) npm 패키지에는 ActiveReportsJS 디자이너 컴포넌트의 모양을 설정하는 데 사용되는 다음 CSS 파일이 포함되어 있습니다.

- ar-js-ui.css - 뷰어와 디자이너 컴포넌트에 모두 사용되는 공통 스타일
- 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` 태그를 사용하여 가져올 수 있습니다. 예를 들어 다음과 같습니다.

```html
<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-designer.css"
  type="text/css"
/>
```

CSS 로더를 지원하는 응용 프로그램에서는 `import` 문을 사용하여 이러한 스타일을 가져올 수 있습니다. 예를 들어 다음과 같습니다.

```js
import "@grapecity/activereports/styles/light-blue-ui.css";
import "@grapecity/activereports/styles/light-blue-designer.css";
```

### 사용자 정의 테마

또한 ActiveReportsJS Report 보고서 디자이너 컴포넌트에 대한 사용자 정의 색 테마를 생성할 수 있습니다.

* [온라인 테마 편집기](/activereportsjs/theme-editor/)를 엽니다.
* 보고서 뷰어 컴포넌트의 다양한 부분에 대한 색상, 글꼴 및 테두리를 설정합니다.
* 테마를 다운로드합니다. 다운로드한 zip 보관 파일은 ```ar-js-ui.css```, ```ar-js-designer.css``` 및 ```ar-js-viewer.css```, 이렇게 3개 파일로 구성되어 있습니다. 처음 2개 파일은 정확히 위 설명에 따라 사용할 수 있습니다. 세 번째 파일은 [뷰어 컴포넌트](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSViewer/Themes)에 대한 스타일입니다.