テーマとダークモード

公式テーマの使用

@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/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 { customTheme } from './custom-theme'const univer = new Univer({  theme: customTheme,})

テーマカスタマイザー

独立したテーマカスタマイザーで Univer のテーマトークンを編集し、ライト/ダークモードをプレビューして Theme 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)

このガイドはいかがですか？

© 2026 DreamNum Co., Ltd.