Custom Theme

Use built-in theme

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

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

Custom Theme

Univer’s theme is based on css variables, and you can customize the theme by overriding these variables.

Please refer to here to learn how the variables of the default theme are defined.

.univer-theme {
  --primary-color: #1890ff;
  --primary-color-hover: #40a9ff;
}

import { defaultTheme } from "@univerjs/design";
// Import your custom theme here
import './custom-theme.css';
 
const univer = new Univer({
  theme: defaultTheme,
});

If your build tool supports some special syntax of css modules, you can use :export to export variables, so that you can use these variables in js.

:export {
  --primary-color: #1890ff;
  --primary-color-hover: #40a9ff;
}

import { defaultTheme } from "@univerjs/design";
import customTheme from './custom-theme.css';
 
const univer = new Univer({
  theme: {
    ...defaultTheme,
    ...customTheme,
  }
});

Custom Model Other Releases