# 화면에 맞는 테마

Grid 테마는 표 안의 배경·선·텍스트·선택 상태를 함께 구성합니다. 페이지 전체의 배경을 덮는 설정이 아니라 표의 읽기 환경을 맞추는 설정입니다.

Canonical: https://grid.syidax.com/ko/docs/guides/theming/

<a id="understand"></a>

## 동작 원리와 선택 기준

alpine·balham과 각각의 dark 프리셋을 사용할 수 있습니다. 먼저 기본 프리셋을 선택하고 필요한 토큰만 덮어써 hover·선택·오류 등의 상태 대비를 유지하세요.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

- [설치와 연결 · 공통 예제 데이터](https://grid.syidax.com/ko/docs/guides/getting-started.md)

<a id="example-1"></a>

## 예제 1. 밝은 화면과 어두운 화면

앱 테마 전환 시 Grid 테마도 명시적으로 바꿉니다.

```javascript
grid.theme = 'alpine';
// 앱이 어두운 테마로 전환되었을 때:
grid.theme = 'alpine-dark';
```

결과 확인: 표의 글자·선·배경이 함께 바뀝니다. 페이지 바깥 영역의 색상은 앱의 스타일에서 관리합니다.

<a id="example-2"></a>

## 예제 2. 밀도 조절

데이터를 더 많이 보여 주는 것과 읽기 쉬운 간격 사이의 균형을 정합니다.

```javascript
grid.theme = 'balham';
grid.rowHeight = 36;
grid.height = 480;
```

결과 확인: Grid 높이와 행 높이가 달라 현재 보이는 행 수가 바뀝니다. 터치 조작과 긴 텍스트도 함께 확인합니다.

<a id="example-3"></a>

## 예제 3. 브랜드 토큰으로 확장

theme에 {extends: 기본 테마, tokens: 토큰 객체}를 전달합니다. 사용 가능한 키는 GridTokenOverrides 타입에서 확인하고 앱의 강조색·선택색·대비를 맞춥니다.

결과 확인: 존재하지 않는 CSS 변수명을 추측해 덮어쓰지 않습니다. 변경 후 선택 행·편집 오류·메뉴·툴팁이 모두 읽히는지 확인하세요.

<a id="pitfalls"></a>

## 조합할 때와 문제를 해결할 때

고정 행 높이에 비해 렌더러 내용이 높으면 잘릴 수 있습니다. 행 레이아웃과 테마 밀도를 함께 설계합니다.

테마 객체 내부만 수정하면 변경을 감지하지 못할 수 있습니다. 새 theme 객체와 tokens 객체를 전달하세요.

<a id="related-api"></a>

## 이 기능에 사용하는 API

- [theme](https://grid.syidax.com/ko/docs/options/theme.md) — 밝은·어두운 프리셋 또는 프리셋을 확장한 토큰 객체로 Grid의 색상과 표현을 설정합니다.
- [themeChanged](https://grid.syidax.com/ko/docs/events/themeChanged.md) — Grid 테마가 바뀌었을 때 발생합니다. 앱 바깥 영역의 테마와 함께 확인합니다.

<a id="next"></a>

## 함께 읽기

- [행·열·ID의 관계](https://grid.syidax.com/ko/docs/guides/concepts.md)
- [결과와 이벤트 연결](https://grid.syidax.com/ko/docs/guides/data-event-access.md)
- [Features에서 살펴보기](https://grid.syidax.com/grid/theming) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.