# 테마와 다크 모드

- Human documentation: [https://docs.univer.ai/ko-KR/guides/fundamentals/ui/themes](https://docs.univer.ai/ko-KR/guides/fundamentals/ui/themes)

- Agent Markdown: [https://docs.univer.ai/ko-KR/guides/fundamentals/ui/themes.md](https://docs.univer.ai/ko-KR/guides/fundamentals/ui/themes.md)

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

- Source: [fundamentals/ui/themes.ko-KR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/fundamentals/ui/themes.ko-KR.mdx)

---

## 공식 테마 사용

`@univerjs/themes`는 `defaultTheme`(`blueTheme` 별칭), `darkBlueTheme`, `greenTheme`, `orangeTheme`, `purpleTheme`, `redTheme`, `yellowTheme`를 내보냅니다.

> [!NOTE]
> 테마를 지정하지 않으면 기본적으로 
> 
> `defaultTheme`
> 
> 이 사용됩니다.

### 테마 플러그인 설치

#### 프리셋 모드

프리셋 모드에서는 `@univerjs/presets` 패키지에서 테마를 가져올 수 있습니다.

```typescript
// import { defaultTheme } from "@univerjs/presets";
import { yellowTheme } from '@univerjs/presets'

const { univer } = createUniver({
  theme: yellowTheme,
  // theme: defaultTheme,
})
```

#### 플러그인 모드

플러그인 모드에서는 `@univerjs/themes` 패키지가 테마를 제공하므로 먼저 이 패키지를 설치해야 합니다.

#### npm

```bash
npm install @univerjs/themes
```

#### pnpm

```bash
pnpm add @univerjs/themes
```

#### yarn

```bash
yarn add @univerjs/themes
```

#### bun

```bash
bun add @univerjs/themes
```

```typescript
import { yellowTheme } from '@univerjs/themes'
// import { defaultTheme } from "@univerjs/themes";

const univer = new Univer({
  theme: yellowTheme,
  // theme: defaultTheme,
})
```

## 테마 맞춤 설정

`Theme` 인터페이스를 준수하는 객체를 만들어 테마를 맞춤 설정할 수 있습니다. 기본 테마 변수가 어떻게 정의되어 있는지 알아보려면 [이 문서](https://docs.univer.ai/ko-KR/reference/types/theme.md)를 참조하세요.

```typescript title="custom-theme.ts"
import type { Theme } from '@univerjs/presets'
// import type { Theme } from "@univerjs/themes";

export const customTheme: Theme = {
  white: '#FEFEFE',
  black: '#1C1C1C',
  primary: {
    50: '#F6F5FF',
    100: '#EDEBFE',
    200: '#DCD7FE',
    300: '#CABFFD',
    400: '#AC94FA',
    500: '#9061F9',
    600: '#7E3AF2',
    700: '#6C2BD9',
    800: '#5521B5',
    900: '#4A1D96',
  },
  // ...
}
```

```typescript
// Import your custom theme here
import { customTheme } from './custom-theme'

const univer = new Univer({
  theme: customTheme,
})
```

### 테마 맞춤 설정 도구

독립 실행형 테마 맞춤 설정 도구를 사용해 Univer 테마 토큰을 편집하고, 라이트 모드와 다크 모드를 미리 보고, 생성된 Theme JSON을 복사할 수 있습니다.

- [테마 맞춤 설정 도구 열기](/tools/theme-customizer)
  팔레트 토큰, 반복 색상, 강조 색상을 조정하고 사용자 지정 테마를 내보낼 수 있습니다.

## 다크 모드

Univer는 다크 모드를 지원하며, `darkMode` 속성을 `true`로 설정해 활성화할 수 있습니다.

```typescript
new Univer({
  darkMode: true,
})
```

### Facade API

Facade API를 사용해 다크 모드를 동적으로 전환할 수도 있습니다.

```typescript
import { darkBlueTheme } from '@univerjs/themes'

univerAPI.setTheme(darkBlueTheme)
const currentTheme = univerAPI.getCurrentTheme()
console.log(univerAPI.isDarkMode(), currentTheme)

univerAPI.toggleDarkMode(false)
```