테마Theming

다크 모드Dark mode

상위 요소에 dark 클래스를 두면 팔레트가 바뀝니다. globals.css의 custom-variant dark가 dark: 유틸리티를 .dark 아래로 한정하므로, dark:text-text-primary 같은 클래스가 같은 규칙을 따릅니다. 값은 @horon-ai/tokens의 darkColors에서 옵니다.A dark class on an ancestor switches the palette. The custom-variant dark in globals.css scopes dark: utilities under .dark, so a class such as dark:text-text-primary follows the same rule. The values come from darkColors in @horon-ai/tokens.

<html lang="ko" class="dark">

스위치는 이 클래스를 토글하고, 현재 스킴은 The switch toggles the class, and useColorScheme이 읽어 알려 줍니다. reports the current scheme.

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

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

플랫폼 글자 크기Platform type scale

상위 요소에 data-platform="desktop" 또는 data-platform="mobile"을 두면 13개 글자 스타일의 크기와 줄 높이가 그 플랫폼 값으로 바뀝니다. 값이 없으면 Web입니다. 예를 들어 body-md는 Web 16px, Desktop 14px, Mobile 16px이고 display-lg는 56, 48, 36px입니다.With data-platform="desktop" or data-platform="mobile" on an ancestor, all 13 text styles take that platform's size and line height. With no value they use the Web values: body-md is 16px on Web, 14px on Desktop and 16px on Mobile, and display-lg is 56, 48 and 36px.

<body data-platform="mobile">

새 크기를 만들지 않습니다. 값이 빠졌으면 세 플랫폼 값을 함께 토큰에 추가합니다.No one-off sizes: a missing value is added to the tokens for all three platforms at once.

JS에서 토큰 읽기Read tokens in JavaScript

@horon-ai/tokens는 lightColors, darkColors, primitives, glass, veil, radius, shadow, spacing, fontFamily, fontWeight, platforms, textStyles를 내보냅니다. 색 키는 CSS 변수 이름에서 --color- 접두사를 뺀 형태입니다.@horon-ai/tokens exports lightColors, darkColors, primitives, glass, veil, radius, shadow, spacing, fontFamily, fontWeight, platforms and textStyles. A colour key is the CSS variable name without the --color- prefix.

import { lightColors, radius, textStyles } from "@horon-ai/tokens";

lightColors["text-primary"]; // "#17181a"
radius.md; // 12
textStyles["body-md"].size.web; // 16

theme.css는 생성 파일theme.css is generated

packages/tokens/theme.css는 packages/tokens/src의 값에서 만듭니다. 손으로 고치면 커밋된 파일과 생성 결과를 비교하는 테스트가 실패합니다. 값을 바꿀 때는 원본 토큰을 고치고 다시 생성합니다.packages/tokens/theme.css is built from the values in packages/tokens/src. Editing it by hand fails the test that compares the committed file with a fresh build. Change the source tokens and generate again.

bun run tokens