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.