Themes and Dark Mode

Use built-in theme

Univer has two built-in themes, defaultTheme and greenTheme, which are in the @univerjs/themes package. You can choose one of them according to your needs.


import { defaultTheme } from "@univerjs/themes";
// import { greenTheme } from "@univerjs/themes";
 
const univer = new Univer({
  theme: defaultTheme,
  // theme: greenTheme,
});

Custom Theme

You can create a custom theme by creating an object that conforms to the Theme interface. Please refer to here to learn how the variables of the default theme are defined.

custom-theme.ts


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

Themes and Dark Mode

Use built-in theme

Custom Theme

Dark Mode coming soon