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

Использование официальных тем

@univerjs/themes экспортирует defaultTheme (также blueTheme), darkBlueTheme, greenTheme, orangeTheme, purpleTheme, redTheme и yellowTheme.

Если тема не указана, по умолчанию используется defaultTheme.

Установка плагинов тем

Режим пресетов

В режиме пресетов темы можно импортировать из пакета @univerjs/presets:

TypeScript

// import { defaultTheme } from "@univerjs/presets";import { yellowTheme } from '@univerjs/presets'const { univer } = createUniver({  theme: yellowTheme,  // theme: defaultTheme,})

Режим плагинов

В режиме плагинов темы предоставляются пакетом @univerjs/themes, поэтому сначала его нужно установить.

Shell

pnpm add @univerjs/themes

Shell

npm install @univerjs/themes

Shell

yarn add @univerjs/themes

Shell

bun add @univerjs/themes

TypeScript

import { yellowTheme } from '@univerjs/themes'// import { defaultTheme } from "@univerjs/themes";const univer = new Univer({  theme: yellowTheme,  // theme: defaultTheme,})

Настройка тем

Чтобы настроить тему, создайте объект, соответствующий интерфейсу Theme. О том, как определены переменные темы по умолчанию, читайте в этой документации.

TypeScript

import type { Theme } from '@univerjs/themes';import { defaultTheme } from '@univerjs/themes';export const customTheme: Theme = {  ...defaultTheme,  primary: {    ...defaultTheme.primary,    50: '#F5F3FF', 100: '#EDE9FE', 200: '#DDD6FE', 300: '#C4B5FD',    400: '#A78BFA', 500: '#8B5CF6', 600: '#7C3AED', 700: '#6D28D9',    800: '#5B21B6', 900: '#4C1D95',  },};

TypeScript

// Import your custom theme hereimport { customTheme } from './custom-theme'const univer = new Univer({  theme: customTheme,})

Редактор тем

В отдельном редакторе тем можно изменять токены темы Univer, просматривать светлый и тёмный режимы и копировать созданный JSON темы.

Открыть редактор тем

Настройте палитру, циклические цвета и цвета выделения, а затем экспортируйте собственную тему.

Тёмный режим

Univer поддерживает тёмный режим. Чтобы включить его, задайте свойству darkMode значение true.

TypeScript

new Univer({  darkMode: true,})

Facade API

Тёмный режим также можно переключать динамически с помощью Facade API.

TypeScript

import { darkBlueTheme } from '@univerjs/themes'univerAPI.setTheme(darkBlueTheme)univerAPI.toggleDarkMode(true)const currentTheme = univerAPI.getCurrentTheme()console.log(univerAPI.isDarkMode(), currentTheme)univerAPI.toggleDarkMode(false)

Насколько полезно это руководство?