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 your custom theme hereimport { 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)const currentTheme = univerAPI.getCurrentTheme()console.log(univerAPI.isDarkMode(), currentTheme)univerAPI.toggleDarkMode(false)

이 가이드는 어떠셨나요?

© 2026 DreamNum Co., Ltd.