# 보고서 테마

## Content



보고서 테마는 보고서의 모양과 느낌을 사용자 정의하는 방법 중 하나입니다. 이 기능은 여러 보고서의 모양을 단일 구성으로 제어하려는 경우에 유용합니다. 연결된 리소스에서 보고서 제목이나 표 열 헤더 같은 정적 텍스트를 끌어오는 다국어 보고서를 제공하는 데에도 도움이 될 수 있습니다.

### 보고서 테마 구조

보고서 테마는 색 팔레트, 주요 및 보조 글꼴 속성, 이미지 목록, 텍스트 값을 포함하는 JSON 개체입니다. 현재 ActiveReportsJS는 테마 편집기를 제공하지 않지만 다음 단계에 따라 쉽게 테마를 처음부터 만들 수 있습니다.

* ```*.rdlx-json-theme``` 확장명을 가진 새 파일을 만듭니다.
* 새로 만든 파일에 다음 내용을 복사하고 값을 고유한 값으로 바꿉니다. [base64-image](https://www.base64-image.de/) 같은 온라인 도구를 사용하여 이미지 파일을 base64 문자열로 변환할 수 있습니다.

```json
{
  "Theme": {
    "Colors": {
      "Dark1": "#000000",
      "Dark2": "#1a1a1a",
      "Light1": "#40cddf",
      "Light2": "#e6e6e6",
      "Accent1": "MediumTurquoise",
      "Accent2": "Gold",
      "Accent3": "DeepPink",
      "Accent4": "#557bd2",
      "Accent5": "#8acc1f",
      "Accent6": "#409dcc",
      "Hyperlink": "#aaa",
      "HyperlinkFollowed": "#3c3c3c"
    },
    "Fonts": {
      "MajorFont": {
        "Family": "Montserrat",
        "Style": "Normal",
        "Size": "20pt",
        "Weight": "Medium"
      },
      "MinorFont": {
        "Family": "Montserrat",
        "Style": "Normal",
        "Size": "9pt",
        "Weight": "Normal"
      }
    },
    "Images": [
      {
        "Name": "Logo",
        "MIMEType": "image/png",
        "ImageData": "iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsSAAALEgHS3X78AAABD0lEQVRIie2UzW3CQBCFn1OB0wG3dyUVABUk6SDpIHRAB0AFoQPSAaEDru8UOmBLiFYao9F6gZXZW/Iky9q/93lnxoN/3VLj1yWdALTJmTnJ1dBIPiTj1Dzq+Z40pYDqKgGMa97gO7OnlTQYkgIOmT3BniqAfcZ8RvI4FNCkE5J+AIycee5WxcoleW3v9kLZ3g3YAOhCsqwOIBlDM7fhWNJnVYBBvgB07eHtEkTS6FYJ95KcGOwATG24Ifnu1qLxzvIUXInvSS5KAfHw1kEOFr7gzHsiefa9CnCgmOwPNxWuVZgHFDU7kvGrX111FZdvcTe1xD9ZiIr/7KIQ5STpBcDEuu3UbQkkH4f6/jUB+AWm0kmTmeXA3wAAAABJRU5ErkJggg=="
      }
    ],
    "Constants": [
        {
          "Key": "Title",
          "Value": "Sales Report"
        }
      ]
  }
}
```

### 보고서를 테마에 연결

보고서를 테마에 연결하려면 ```*.rdlx-json-theme``` 파일을 보고서 파일과 동일한 디렉터리에 저장해야 합니다. 그러면 보고서 ```테마``` 속성 편집기의 드롭다운 목록에 사용 가능한 테마가 표시됩니다. 테마를 선택한 후 다음 식을 사용하여 테마의 값을 참조할 수 있습니다.

| 테마 값             | 식                            |
|-------------------------|---------------------------------------|
| 밝게 1 색            | {Theme.Colors!Light1}                 |
| 밝게 2 색            | {Theme.Colors!Light2}                 |
| 어둡게 1 색             | {Theme.Colors!Dark1}                  |
| 어둡게 2 색             | {Theme.Colors!Dark2}                  |
| 강조색1 색           | {Theme.Colors!Accent1}                |
| 강조색2 색           | {Theme.Colors!Accent2}                |
| 강조색3 색           | {Theme.Colors!Accent3}                |
| 강조색4 색           | {Theme.Colors!Accent4}                |
| 강조색5 색           | {Theme.Colors!Accent5}                |
| 강조색6 색           | {Theme.Colors!Accent6}                |
| 하이퍼링크 색         | {Theme.Colors!Hyperlink}              |
| HyperlinkFollowed 색 | {Theme.Colors!HyperlinkFollowed}     |
| 주 글꼴 패밀리       | {Theme.Fonts!MajorFont.Family}        |
| 주 글꼴 크기         | {Theme.Fonts!MajorFont.Size}          |
| 주 글꼴 스타일        | {Theme.Fonts!MajorFont.Style}         |
| 주 글꼴 두께       | {Theme.Fonts!MajorFont.Weight}        |
| 보조 글꼴 패밀리       | {Theme.Fonts!MinorFont.Size}          |
| 보조 글꼴 크기         | {Theme.Fonts!MinorFont.Size}          |
| 보조 글꼴 스타일        | {Theme.Fonts!MinorFont.Style}         |
| 보조 글꼴 두께       | {Theme.Fonts!MinorFont.Weight}        |
| 이미지 데이터 <sup>*</sup>             | {Theme.Images!&lt;Image Name&gt;.ImageData} |
| 이미지 MIME 형식         | {Theme.Images!&lt;Image Name&gt;.MIMEType}          |
| 상수 값          | {Theme.Constants("&lt;Constant Key&gt;")}  |

<sup>*</sup> 테마의 이미지를 사용하려면 [이미지 보고서 항목](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Visualizers/Image)의 ```소스``` 속성을 ```데이터베이스```로 설정합니다.

### 스타일 속성

일부 보고서 항목에는 테마 기반의 여러 값을 설정하는 바로 가기인 ```스타일``` 속성이 있습니다. 예를 들어 [텍스트 상자](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox)의 ```스타일``` 속성에는 ```밝게 1 강조색1 주요```와 같이 세 개의 값이 공백으로 구분된 항목 목록이 포함되어 있습니다. 항목 중 하나를 선택하면 텍스트 상자는 첫 번째 값을 텍스트 전경색(예: ```밝게 1```)으로, 두 번째 값을 텍스트 배경색(예: ``강조색1```)으로, 세 번째 값을 글꼴 속성(예: ```주요```)으로 사용합니다.

### 런타임 테마 확인

실제로 보고서를 실행하고 내보내거나 뷰어 컴포넌트에 로드하는 응용 프로그램은 런타임에 테마를 확인해야 합니다. 이 작업을 위해 [리소스 로케이터 기능](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/LoadingReports/ResourceLocator)을 사용할 수 있습니다. 예를 들어 ```*.rdlx-json-theme``` 파일을 응용 프로그램의 정적 자산에 저장하고 리소스 로케이터 구현의 코드를 통해 파일 내용을 반환할 수 있습니다. 테마를 동적으로 변경할 수도 있습니다. 이 방법의 전체 코드 샘플은 [라이브 데모](/activereportsjs/demos/features/ReportThemes/purejs)를 참조하십시오.