# useSeedClassName
URL: /lynx/hooks/use-seed-class-name
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/hooks/use-seed-class-name.mdx

root `<page>`에 적용할 테마 className을 반환하고 테마 변경을 구독하는 훅입니다.

사용 가능 버전: @seed-design/lynx-react@0.3.0

## Import

```ts
import { useSeedClassName } from "@seed-design/lynx-react";
```

`useSeedClassName`은 `@seed-design/lynx-react` 패키지에 포함되어 있습니다. `getSeedClassName()`의 reactive 버전으로, `useGlobalProps()`를 통해 `lynx.__globalProps.theme` 변경을 구독하여 테마가 바뀌면 갱신된 className을 반환합니다.

## Usage

### 기본 사용

root `<page>` 요소에 적용합니다.

```tsx
import { root } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <page className={seedClassName}>
      <App />
    </page>
  );
}

root.render(<Root />);
```

### `colorMode` 옵션

| `colorMode` 설정 | 기기 설정  | 반환되는 테마 클래스                    |
| -------------- | ------ | ------------------------------ |
| `system` (기본값) | 라이트 모드 | `seed-user-color-scheme-light` |
| `system`       | 다크 모드  | `seed-user-color-scheme-dark`  |
| `light-only`   | (무관)   | `seed-user-color-scheme-light` |
| `dark-only`    | (무관)   | `seed-user-color-scheme-dark`  |

`system`일 때 `lynx.__globalProps.theme` 값을 읽어 기기의 다크 모드 설정을 따릅니다.

## 동작 방식

`useSeedClassName()`은 내부적으로 `useGlobalProps()`로 `lynx.__globalProps`를 구독합니다. host가 테마를 변경하면 이 훅을 사용하는 컴포넌트가 리렌더되어, 갱신된 테마에 맞는 className을 반환합니다.

className 매핑 로직은 순수 함수인 `getSeedClassName()`과 동일합니다. 차이는 테마 변경 구독 여부뿐입니다.

- `useSeedClassName()`: 테마 변경을 구독하는 훅. root `<page>`처럼 테마 변경에 반응해야 하는 곳에 사용합니다.
- `getSeedClassName()`: 호출 시점의 테마를 한 번만 읽는 순수 함수. 테마 변경에 반응할 필요가 없는 정적 컨텍스트에서 사용합니다.

<Callout>
  웹(React) 환경에서는 번들러 플러그인이 테마를 자동으로 처리하지만, Lynx에서는 `useSeedClassName()`으로 명시적으로 구독합니다. 테마 시스템 전반은 [Theming](/lynx/getting-started/theming) 문서를 참고하세요.
</Callout>

## API

### Parameters

| Property    | Type                                      | Default    | Description                                                               |
| ----------- | ----------------------------------------- | ---------- | ------------------------------------------------------------------------- |
| `colorMode` | `"system" \| "light-only" \| "dark-only"` | `"system"` | 테마 결정 방식입니다. `system`은 기기 설정을 따르고, `light-only` / `dark-only`는 테마를 고정합니다. |

### Return

| Type     | Description                                                                     |
| -------- | ------------------------------------------------------------------------------- |
| `string` | 적용할 테마 클래스(`seed-user-color-scheme-light` 또는 `seed-user-color-scheme-dark`)입니다. |

## 사용 시 주의사항

- `useGlobalProps()`에 의존하므로 `@lynx-js/react` `0.117.0` 이상이 필요합니다.
- 훅이므로 컴포넌트 본문에서만 호출할 수 있습니다. 테마 변경에 반응할 필요가 없다면 순수 함수인 `getSeedClassName()`을 사용하세요.