Themes and Dark Mode
Using Official Themes
@univerjs/themes exports defaultTheme (also available as blueTheme), darkBlueTheme, greenTheme, orangeTheme, purpleTheme, redTheme, and yellowTheme.
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 { yellowTheme } from '@univerjs/presets'const { univer } = createUniver({ theme: yellowTheme, // theme: defaultTheme,})Plugin Mode
In plugin mode, themes are provided by the @univerjs/themes package, which you need to install first.
pnpm add @univerjs/themesnpm install @univerjs/themesyarn add @univerjs/themesbun add @univerjs/themesimport { yellowTheme } from '@univerjs/themes'// import { defaultTheme } from "@univerjs/themes";const univer = new Univer({ theme: yellowTheme, // 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.
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 hereimport { customTheme } from './custom-theme'const univer = new Univer({ theme: customTheme,})Theme Customizer
Use the standalone theme customizer to edit Univer theme tokens, preview light and dark modes, and copy the generated Theme JSON.
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.
import { darkBlueTheme } from '@univerjs/themes'univerAPI.setTheme(darkBlueTheme)const currentTheme = univerAPI.getCurrentTheme()console.log(univerAPI.isDarkMode(), currentTheme)univerAPI.toggleDarkMode(false)How is this guide?