useSeedClassName

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

Import

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

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

Usage

기본 사용

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

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(): 호출 시점의 테마를 한 번만 읽는 순수 함수. 테마 변경에 반응할 필요가 없는 정적 컨텍스트에서 사용합니다.

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

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()을 사용하세요.

useSeedClassName

On this page