Web SDK

主题与暗黑模式

使用官方主题

@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
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/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。

打开主题定制器

调整色板、循环色、高亮色，并导出自定义主题。

暗黑模式

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)

你觉得这篇文档如何？

© 2026 DreamNum Co., Ltd.