useColorSchemeuseColorScheme

html 요소의 .dark 클래스에서 현재 색상 스킴을 읽습니다.Read the active color scheme from the .dark class on the html element.

사용법Usage

theme-toggle.tsx

import { Button, useColorScheme } from "@horon-ai/react";

function ThemeToggle() {
  const scheme = useColorScheme();
  return (
    <Button variant="link" onClick={() => document.documentElement.classList.toggle("dark")}>
      {scheme === "dark" ? "Light" : "Dark"}
    </Button>
  );
}

시그니처Signature

use-color-scheme.ts

export type ColorScheme = "light" | "dark";

export function useColorScheme(): ColorScheme

매개변수Parameters

매개변수가 없습니다.Takes no parameters.

반환값Returns

루트 요소에 .dark 클래스가 있으면 dark, 없으면 light입니다. 서버 렌더에서는 light입니다.dark while the root element carries the .dark class, light otherwise.

동작과 주의Behavior notes

.dark 클래스가 유일한 소스입니다. prefers-color-scheme은 보지 않습니다. 테마는 OS를 따르지 않고 명시적으로 전환합니다.The .dark class is the only source; prefers-color-scheme is deliberately ignored, because the theme is an explicit switch, not an OS follow.
MutationObserver로 html의 class 속성을 지켜보므로 페이지 어디서든 테마를 바꾸면 이 훅을 쓰는 모든 컴포넌트가 다시 렌더됩니다.A MutationObserver watches the class attribute on the html element, so a toggle anywhere on the page re-renders every caller.
서버 렌더와 하이드레이션 전에는 light를 돌려줍니다. 클라이언트에서 클래스를 읽은 뒤에 실제 값이 나옵니다.A server render reports light until the class is read on the client.