Vapor UI 테마 시스템 설정 가이드

1. Next.js (App Router)

패키지 설치
```
npm install @vapor-ui/core
```

테마 설정 파일 생성
(예시: lib/theme.config.ts)

import { createThemeConfig } from '@vapor-ui/core';

export const themeConfig = createThemeConfig({
    appearance: 'system', // 'light', 'dark', 'system'
    radius: 'full',
    scaling: 1.0,
    storageKey: 'my-next-app-theme',
});

Root layout.tsx에 적용

import { themeConfig } from '@/lib/theme.config';
import { ThemeProvider, ThemeScript } from '@vapor-ui/core';
import '@vapor-ui/core/dist/styles.css';

export default function RootLayout({ children }) {
    return (
        <html lang="en" suppressHydrationWarning>
            <head>
                <ThemeScript config={themeConfig} />
            </head>
            <body>
                <ThemeProvider config={themeConfig}>{children}</ThemeProvider>
            </body>
        </html>
    );
}

2. Vite

패키지 설치
```
npm install @vapor-ui/core
```

index.html에 FOUC 방지 스크립트 추가

<!-- public/index.html -->
<script>
    (function () {
        const defaultConfig = { appearance: 'light', radius: 'md', scaling: 1.0 };
        const storageKey = 'my-vite-app-theme';
        const root = document.documentElement;
        let currentThemes = defaultConfig;
        try {
            const storedItem = localStorage.getItem(storageKey);
            if (storedItem) {
                const storedSettings = JSON.parse(storedItem);
                currentThemes = Object.assign({}, defaultConfig, storedSettings);
            }
        } catch (e) {}
        if (currentThemes.appearance === 'dark') {
            root.classList.add('vapor-dark-theme');
        } else {
            root.classList.add('vapor-light-theme');
        }
        const radiusMap = { none: 0, sm: 0.5, md: 1, lg: 1.5, xl: 2, full: 3 };
        const radiusFactor = radiusMap[currentThemes.radius] ?? 1;
        root.style.setProperty('--vapor-radius-factor', radiusFactor.toString());
        const scaleFactor = currentThemes.scaling ?? 1;
        root.style.setProperty('--vapor-scale-factor', scaleFactor.toString());
    })();
</script>

ThemeProvider 설정

// src/main.tsx
import { ThemeProvider, createThemeConfig } from '@vapor-ui/core';
import '@vapor-ui/core/styles.css';

const themeConfig = createThemeConfig({
    appearance: 'light',
    radius: 'md',
    scaling: 1.0,
    storageKey: 'my-vite-app-theme',
});

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <ThemeProvider config={themeConfig}>
            <App />
        </ThemeProvider>
    </React.StrictMode>,
);

3. Tailwind CSS

Tailwind CSS와 Vapor UI의 CSS 변수를 통합하는 방법, Tailwind의 dark: variant와 Vapor UI 다크 모드 연동법 등은 추후 문서로 제공될 예정입니다.

이렇게 환경별로 설정만 빠르게 적용하면 Vapor UI의 테마 시스템을 사용할 수 있습니다.

Theming

Vapor UI 테마 시스템 설정 가이드

1. Next.js (App Router)

2. Vite

3. Tailwind CSS

On this page