Themes and Dark Mode

Using Official Themes

Univer provides two official themes, defaultTheme and greenTheme, which are available in the @univerjs/themes package. You can choose one based on your needs.

When no theme is specified, defaultTheme is used by default.

Installing Theme Plugins

Preset Mode

In preset mode, themes can be imported from the @univerjs/presets package:

// import { defaultTheme } from "@univerjs/presets";
import { greenTheme } from '@univerjs/presets'

const { univer } = createUniver({
  theme: greenTheme,
  // theme: defaultTheme,
})

Plugin Mode

In plugin mode, themes are provided by the @univerjs/themes package, which you need to install first.

npm install @univerjs/themes

import { greenTheme } from '@univerjs/themes'
// import { defaultTheme } from "@univerjs/themes";

const univer = new Univer({
  theme: greenTheme,
  // theme: defaultTheme,
})

Customizing Themes

You can customize themes by creating an object that conforms to the Theme interface. Refer to this documentation to understand how the default theme variables are defined.

custom-theme.ts

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 here
import { customTheme } from './custom-theme'

const univer = new Univer({
  theme: customTheme,
})

Dark Mode

Univer supports dark mode, which can be enabled by setting the darkMode property to true.

new Univer({
  darkMode: true,
})

Facade API

You can also dynamically toggle dark mode using the Facade API.

// Enable dark mode
univerAPI.toggleDarkMode(true)

// Disable dark mode
univerAPI.toggleDarkMode(false)