# Theming
URL: /docs/getting-started/theming
Vapor UI 테마 시스템을 설정하는 방법
# Vapor UI 테마 시스템 설정 가이드
## 1. Next.js (App Router)
1. **패키지 설치**
```bash
npm install @vapor-ui/core
```
2. **테마 설정 파일 생성**\
(예시: `lib/theme.config.ts`)
```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',
});
```
3. **Root layout.tsx에 적용**
```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 (
{children}
);
}
```
***
## 2. Vite
1. **패키지 설치**
```bash
npm install @vapor-ui/core
```
2. **index.html에 FOUC 방지 스크립트 추가**
```html
```
3. **ThemeProvider 설정**
```tsx
// 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(
,
);
```
***
## 3. Tailwind CSS
* Tailwind CSS와 Vapor UI의 CSS 변수를 통합하는 방법, Tailwind의 `dark:` variant와 Vapor UI 다크 모드 연동법 등은 **추후 문서로 제공될 예정**입니다.
***
이렇게 환경별로 설정만 빠르게 적용하면 Vapor UI의 테마 시스템을 사용할 수 있습니다.