# 主題與深色模式

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

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

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

- Source: [fundamentals/ui/themes.zh-TW.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/fundamentals/ui/themes.zh-TW.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/zh-TW/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 { customTheme } from './custom-theme'

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

### 主題定制器

使用獨立的主題定制器來編輯 Univer 主題 Tokens，預覽淺色和深色模式，並複製產生的 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)
```