# Темы и тёмный режим

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

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

- Requested language: `ru-RU`

- Content language: `ru-RU`

- Documentation version: `1.2.0`

- Source: [fundamentals/ui/themes.ru-RU.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/fundamentals/ui/themes.ru-RU.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/ru-RU/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, просматривать светлый и тёмный режимы и копировать созданный 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)
```