ThemeProvider

@hua-labs/ui

v1.0.0

테마 관리를 위한 컨텍스트 프로바이더입니다. 라이트, 다크, 시스템 테마를 지원하며 localStorage에 저장됩니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { ThemeProvider } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

Current State

theme: system

resolvedTheme: light

setTheme()

toggleTheme()

useTheme Hook

theme현재 테마 설정 ('light' | 'dark' | 'system')setTheme테마를 설정하는 함수resolvedTheme실제 적용된 테마 ('light' | 'dark'), 'system'은 OS 설정에 따라 결정됩니다toggleTheme라이트/다크 테마를 전환하는 함수

Props

이름	타입	기본값
`children*`	`React.ReactNode`	-
`defaultTheme`	`"light" \| "dark" \| "system"`	`"light"`
`storageKey`	`string`	`"hua-ui-theme"`
`enableSystem`	`boolean`	`true`
`enableTransition`	`boolean`	`true`

코드 예시

docs:common.basicUsagetsx

1import { ThemeProvider } from '@hua-labs/ui';
2 
3// Wrap your app with ThemeProvider
4<ThemeProvider>
5  <App />
6</ThemeProvider>

docs:components.themeProvider.examples.customConfigtsx

1<ThemeProvider
2  defaultTheme="dark"
3  storageKey="my-app-theme"
4  enableSystem={true}
5  enableTransition={true}
6>
7  <App />
8</ThemeProvider>

docs:components.themeProvider.examples.useThemeHooktsx

1import { useTheme } from '@hua-labs/ui';
2 
3function MyComponent() {
4  const { theme, setTheme, resolvedTheme, toggleTheme } = useTheme();
5 
6  return (
7    <div>
8      <p>Current theme: {theme}</p>
9      <p>Resolved theme: {resolvedTheme}</p>
10      <button onClick={toggleTheme}>Toggle</button>
11      <button onClick={() => setTheme('dark')}>Dark</button>
12      <button onClick={() => setTheme('light')}>Light</button>
13      <button onClick={() => setTheme('system')}>System</button>
14    </div>
15  );
16}

필수 조건

ThemeProvider로 앱을 감싸야 합니다. HuaProvider를 사용하면 자동으로 설정됩니다.

접근성

•:
•:
•:

Logo Parallax