Темы и тёмный режим
Использование официальных тем
@univerjs/themes экспортирует defaultTheme (также blueTheme), darkBlueTheme, greenTheme, orangeTheme, purpleTheme, redTheme и yellowTheme.
defaultTheme.Установка плагинов тем
Режим пресетов
В режиме пресетов темы можно импортировать из пакета @univerjs/presets:
// import { defaultTheme } from "@univerjs/presets";import { yellowTheme } from '@univerjs/presets'const { univer } = createUniver({ theme: yellowTheme, // theme: defaultTheme,})Режим плагинов
В режиме плагинов темы предоставляются пакетом @univerjs/themes, поэтому сначала его нужно установить.
pnpm add @univerjs/themesnpm install @univerjs/themesyarn add @univerjs/themesbun add @univerjs/themesimport { yellowTheme } from '@univerjs/themes'// import { defaultTheme } from "@univerjs/themes";const univer = new Univer({ theme: yellowTheme, // theme: defaultTheme,})Настройка тем
Чтобы настроить тему, создайте объект, соответствующий интерфейсу Theme. О том, как определены переменные темы по умолчанию, читайте в этой документации.
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', }, // ...}// Import your custom theme hereimport { customTheme } from './custom-theme'const univer = new Univer({ theme: customTheme,})Редактор тем
В отдельном редакторе тем можно изменять токены темы Univer, просматривать светлый и тёмный режимы и копировать созданный JSON темы.
Тёмный режим
Univer поддерживает тёмный режим. Чтобы включить его, задайте свойству darkMode значение true.
new Univer({ darkMode: true,})Facade API
Тёмный режим также можно переключать динамически с помощью Facade API.
import { darkBlueTheme } from '@univerjs/themes'univerAPI.setTheme(darkBlueTheme)const currentTheme = univerAPI.getCurrentTheme()console.log(univerAPI.isDarkMode(), currentTheme)univerAPI.toggleDarkMode(false)Насколько полезно это руководство?